Использование шрифтов на страницах сайта

При созднии сайта ожидаешь видеть его на всех платформах в одном и том же стиле. Приходиться подбирать шрифты, таким образом, чтобы они присутствовали на большинстве операционных систем. И даже это не является гарантией того, что страницы сайта будут отображаться правильно.

В статье Typekit vs Google Webfonts я рассматривал вариант использования веб-шрифтов, которые позволяют решить данную проблему. Но там же указал и на основную проблему: падение скорости загрузки страниц. Именно по этой причине я несколько раз пробовал использовать различные сервисы, но каждый раз отказывался от них, из-за того, что страницы начинали загружаться очень медленно.

Для того, чтобы понять, в чем причина, рассмотрим сервис Google Webfonts. Он позволяет внедрить шрифты на страницы двумя способами:

1. Определение используемых шрифтов с помощью подключаемого css-стиля.
2. Внедрение шрифтов на страницы с использованием javascripts.

CSS-стили обычно размещаются в начале страницы. И являются блокирующим ресурсом, то есть, пока стиль не будет подгружен, загрузка страницы не будет продолжена. А ведь порой шрифты весят от 200-300 килобайт.

Javascript позволяет данный недостаток обойти. Но тут начинает сказываться то, что время кеширования шрифтов на компьютере пользователя очень ограничено (из-за параметров сервера Google), и при повторном просмотре сайта через некоторое время, придется загружать шрифты заново. И, естественно, каждый запрос к внешнему ресурсу во время загрузки страницы, так же сказывается на скорости отображения.

Метод эффективного использования шрифтов

Как оказалось, и эти проблемы можно решить. И главное условие при этом: отказаться от любых сервисов раздачи вебшрифтов. Размещать шрифты непосредственно на своем сайте. Да, это значительно сужает диапазон доступных шрифтов из-за лицензионных ограничений. Но все-таки это много лучше, чем ничего.

Шрифты, доступные для использования, можно найти и загрузить на том же Google Webfonts . Лицензия по которой они распространяются, делают возможным их использование на любых сайтах.

Просматриваем каталог, находим требуемое отображение, загружаем шрифты в формате TTF на свой компьютер. И затем идем на страницу Webfont generator , здесь придется работать в режиме эксперта, так как по умолчанию используется генерация только латинских символов.

Сервис позволяет в режиме эксперта не только использовать определенные языки, но также генерировать CSS-файлы, с уже внедренными в них шрифтами в формате BASE64 (чего мы и добиваемся). Достаточно только выбрать нужную опцию.

После загрузки полученного файла стилей, остается задача его подключения таким образом, чтобы не блокировать загрузку страниц.

Для этого будем использовать следующий JavaScript:

function addFont() {
    var style = document.createElement('style');
    style.rel = 'stylesheet';
    document.head.appendChild(style);
    style.textContent = localStorage.sourceSansPro;
}

try {
    if (localStorage.sourceSansPro) {
        // The font is in localStorage, we can load it directly
        addFont();
    } else {
        // We have to first load the font file asynchronously
        var request = new XMLHttpRequest();
        request.open('GET', '/path/to/source-sans-pro.woff.css', true);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                // We save the file in localStorage
                localStorage.sourceSansPro = request.responseText;
                // ... and load the font
                addFont();
            }
        }
        request.send();
    }
} catch(ex) {
    // maybe load the font synchronously for woff-capable browsers
    // to avoid blinking on every request when localStorage is not available
}

Сам скрипт обнаружил в статье Loading webfonts with high performance on responsive websites .

И именно его использование позволяет решить главную проблему. Загрузка проводиться в неблокирующем режиме. Файл кешируется на компьютере на длительное время. При этом не происходит обращения к внешним серверам, и в случае наличия файла стилей в локальном хранилище загрузка файла не проводиться вовсе.

В итоге теперь на моем сайте шрифты одинаковые во всех операционных системах, за исключением мобильных телефонов, там используется другой набор для лучшего восприятия текста. И теперь страницы загружаются много быстрее. Google Pagespeed при этом вырос со значения 79 до 97. На мой взгляд, замечательный результат!