Используем @font-face для подгрузки кастомных шрифтов для сайта

Шрифты и CSS уже достаточно давно перестали быть взаимоисключающими понятиями. Между тем, начиналось все достаточно плохо: веб-разработчики были ограничены набором предустановленных в операционных системах шрифтов. Усугублялось все тем, что две основные платформы Windows и Mac пересекались далеко не на 100%. Из-за этого приходилось делать непростой выбор между эстетикой и совместимостью. Одним из способов стало использование стека шрифтов, при помощи которого осуществлялась замена начертания при отсутствии его в системе. Но радикально этот способ проблему не решал.

Шрифты через CSS

Всю эту печаль в 1998 году начали разгонять, разрабатывая стандарты CSS 2.0. Любопытно, что Microsoft с его детищем в лице Internet проявил гораздо больше гибкости в вопросе интегрирования сторонних шрифтов, нежели его оппонент Netscape. В Редмонде сделали ставку на использование стандарта EOT (Embedded OpenType) – отчасти из-за того, что этот формат был компактным и уже использовался в MS Word. Второй причиной стал удачный алгоритм шифрования, который позволял защитить шрифты от незаконного копирования.

Так или иначе, начало было положено, и оставалось только решить технические детали – фактически, просто договориться о поддержке форматов (OpenType, TrueType, WOFF, SVG) и выработке единого. Для того, чтобы закрыть все возможные варианты, сегодня принято использовать следующую конструкцию:

@font-face {
  font-family: 'Blogger Sans';
  src: url('bloggersans.eot'); /* Режим совместимости с IE9 */
  src: url('bloggersans.eot?#iefix') format('embedded-opentype'), /* Режим совместимости с IE6-IE8 */
       url('bloggersans.woff2') format('woff2'), /* Все основные современные браузеры + улучшенная компрессия */
       url('bloggersans.woff') format('woff'), /* Все основные современные браузеры */
       url('bloggersans.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('bloggersans.svg#svgFontName') format('svg'); /* Старые версии iOS */
}

Она закроет все возможные варианты и обеспечит совместимость с любыми браузерами. После нее в CSS-файле можно использовать свойство font-family:

body {
  font-family: 'Blogger Sans', sans-serif;
}

Строго говоря, сегодня достаточно использовать и указать только тип WOFF2:

@font-face {
  font-family: 'Blogger Sans';
  src: url('bloggersans.woff2') format('woff2');
}

Нужен IE11? Добавьте WOFF. Из других стоит оставить только TTF:

@font-face {
  font-family: 'Blogger Sans';
  src: url('bloggersans.woff2') format('woff2'),
       url('bloggersans.woff') format('woff'),
       url('bloggersans.ttf') format('truetype');
}

Это и будет нашей “золотой серединой”. Главное – правильно укажите путь к загруженным на сервер файлам шрифтов.

Альтернативные способы

Если грузить шрифт с собственного сервера не вариант (а правило @font-face именно об этом), можно воспользоваться готовым сервисом – Google Fonts или аналогичным. Все, что необходимо сделать, это выбрать необходимое семейство и требуемое начертание. Сервис сам сформирует директиву @import, например:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

В формате LESS будет лишь немного иначе:

@import (css) url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Стилизуем аналогично:

body {
  font-family: 'Roboto', sans-serif;
}

При желании можно подключить шрифт и через HTML-код. Сделать это можно с помощью тега link:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Удивитесь, но и в этом случае стилизация будет прежней:

body {
  font-family: 'Roboto', sans-serif;
}

На этом способы подключения заканчиваются, но их вполне достаточно на любой вкус.

Шрифты в CSS: о чем еще необходимо помнить

Размер загружаемых ресурсов – это наше все. Следите за тем, чтобы он оставался в приемлемых рамках. Не стоит грузить все возможные начертания “про запас”. Начните с прямого начертания стандартной толщины 400 и добавляйте другие только по мере необходимости. Либо грузите максимальный набор, а по завершении работ сделайте ревизию и удалите неиспользованное.

Не забывайте про кэширование шрифтов:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresDefault "access 1 year"
</IfModule>

или:

<FilesMatch "\.(eot|otf|woff|woff2|ttf)$">
  Header set Cache-Control "max-age=31536000"
</FilesMatch>

Также можно использовать медиа-запросы. Например, такой вариант будет грузить кастомный шрифт только для экранов шириной более 1024 пикселей:

@media (min-width: 1024px) { 
  body {
    font-family: 'Blogger Sans', sans-serif; 
  }
}

Какой сервис шрифтов выбрать?

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

Еще один момент, о котором стоит знать. В фильтре поиска шрифта присутствуют варианты Cyrillic и Cyrillic Extended. При наличии обоих вариантов можно остановиться на более компактном Cyrillic. Набор символов Extended скорее всего вам не пригодится.

Заключение

Это практически все, что необходимо знать об использовании кастомных шрифтов, правиле @font-face и альтернативах ему. Сегодня использование нестандартного шрифта в веб-разработке является не более чем рутинной задачей, а сложности возникают скорее в выборе из немалого количества существующих вариантов.

Обсуждение вопросов типографики в веб-дизайне мы обязательно продолжим, а пока вы можете задать вопросы на форуме или в комментариях.

Нескучной верстки!