Прочитал недавно статью о загрузке веб-шрифтов на адаптивных сайтах и решил поделиться своими соображениями по этому поводу.
Основная мысль статьи заключается в том, что за счет хранения шрифтов в 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 или загружают специальным скриптом: