Использование веб-шрифтов внутри CSS

Дата: 10.08.2015Метки:

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

Основная мысль статьи заключается в том, что за счет хранения шрифтов в CSS файле мы можем ускорить загрузку сайта и уменьшить количество запросов к серверу. С технической стороны метод выглядит следующим образом. Используя Base64-представление, мы переводим бинарные данные шрифта в ASCII-текст, после чего записываем его в CSS-файл.

Несмотря на очевидные преимущества, у данного метода есть свои недостатки. Если Google Fonts автоматически отдает шрифты в понятном для браузера формате, то в нашем случае придется использовать специальный скрипт. Я же склоняюсь к более простому варианту — просто пожертвовать совместимостью со старыми версиями браузеров.

Шрифты WOFF на текущий момент являются наиболее предпочтительными для использования. Если верить статистике сaniuse.com, этот формат поддерживают более 88% используемых браузеров в мире.

В качестве источника шрифтов лучше всего использовать Goole Fonts. Просто загружаем WOFF-файлы по ссылкам из CSS. По умолчанию в Chrome загружаются шрифты в формате WOFF2, поэтому для загрузки WOFF необходимо использовать браузер Internet Explorer.

Как запасной вариант — можно выполнить конвертирование из формата TTF в WOFF. Для этих целей в интернете есть множество онлайн-сервисов. Следует отметить, что после такой конвертации отрисовка шрифта может незначительно отличаться.

В целом я могу порекомендовать для этих целей Webfont Generator. Кроме функции конвертирования, он еще умеет оптимизировать шрифты и отдавать их в закодированном Base64 виде.

Еще можно использовать ttf to woff converter. Что бы перевести шрифты в Base64-представление используем утилиту Base64 Encode/Decode:

b64 -e input.woff output.txt

Поле того чего копируем шрифты в CSS:

@font-face {
 font-family: 'Noto Sans';
 font-style: normal;
 font-weight: 400;
 src: url(data:application/font-woff;charset=utf-8;base64,
d09GRgABAAAAAGfQABEAAAAAoxQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAA
AEQAAABeBXMEg0dQT1MAAAHEAAAF4wAADKz1RCPkR1NVQgAAB6gAAAAMAAAADAAVAApPUy8y
AAAHtAAAAGAAAABgd9GZHGNtYXAAAAgUAAABFQAAAYz5wR+KY3Z0IAAACSwAAACWAAAA/hmv
GsVmcGdtAAAJxAAABHkAAAe0NgsWDGdhc3AAAA5AAAAAEAAAABAAFgAjZ2x5ZgAADlAAAFDx
...
) format('woff');
}

Файл со шрифтами подключают как обычные CSS или загружают специальным скриптом: