Как использовать @font-face в CSS

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

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

Практический уровень поддержки браузера

Ситуация сильно смещается в сторону WOFF и WOFF 2, поэтому мы, вероятно, можем обойтись без этого:

 

@font-face {
 font-family: 'MyWebFont';
 src: url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff');
}

 

Вероятно, в наши дни вы даже могли бы обойтись только WOFF2.

 

@font-face {
 font-family: 'MyWebFont';
 src: url('myfont.woff2') format('woff2');
}

 

Эти данные поддержки браузера взяты из Caniuse, в котором есть более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром	Fire Fox	IE	Край	Сафари
36	39	Нет	14	12

Мобильный/Планшет

Андроид Хром	Android Firefox	Андроид	iOS-сафари
101	99	101	10,0-10,2

Единственная практическая вещь, которую вы также можете получить с помощью WOFF — это поддержка IE 11.

Глубокая поддержка браузеров

Это метод с самой глубокой поддержкой возможной прямо сейчас. Правило @font-faceдолжно быть добавлено в таблицу стилей перед любыми стилями.

 

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
    url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

 

Затем используйте его для стилизации элементов следующим образом:

 

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

 

Чуть более глубокая поддержка браузера

Если вам нужна своего рода золотая середина между полной поддержкой и практической поддержкой, добавление .ttfбудет охватывать еще несколько основ:

 

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

Хром	Сафари	Fire Fox	Опера	IE	Андроид	iOS
3,5+	3+	3,5+	10.1+	9+	2.2+	4.3+

Альтернативные методы

@import

Хотя @font-faceэто отлично подходит для шрифтов, размещенных на наших собственных серверах, могут быть ситуации, когда решение для размещенных шрифтов лучше. Google Fonts предлагает это как способ использования своих шрифтов. Ниже приведен пример @importзагрузки шрифта Open Sans из Google Fonts:

 

@import url(//fonts.googleapis.com/css?family=Open+Sans);

 

Затем мы можем использовать его для стилизации элементов:

 

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

 

Если вы откроете URL-адрес шрифта, вы сможете увидеть всю @font-faceработу, выполняемую за кулисами.

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

CodePen Embed Fallback

<link> с использованием таблицы стилей

Точно так же вы можете ссылаться на тот же ресурс, что и на любой другой файл CSS, в HTML-документе, а не в CSS. Используя тот же пример из Google Fonts, мы бы использовали это:

 

<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=Open+Sans&display=swap" rel="stylesheet">

 

Затем мы можем стилизовать наши элементы, как и при других методах:

 

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

 

Опять же, это импортирует @font-faceправила, но вместо того, чтобы внедрять их в нашу таблицу стилей, они добавляются в наш HTML.

Это примерно одно и то же: обе техники загружают необходимые ресурсы.

Понимание типов файлов шрифтов

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

WOFF / WOFF2

Расшифровывается как: Web Open Font Format.

Созданные для использования в Интернете и разработанные Mozilla совместно с другими организациями, шрифты WOFF часто загружаются быстрее, чем другие форматы, поскольку они используют сжатую версию структуры, используемую шрифтами OpenType (OTF) и TrueType (TTF). Этот формат также может включать метаданные и информацию о лицензии в файле шрифта. Этот формат кажется победителем, и к нему стремятся все браузеры.

WOFF2 — это следующее поколение WOFF, которое может похвастаться лучшим сжатием, чем оригинал.

SVG / SVGЗ

Обозначает: Масштабируемая векторная графика (шрифт)

SVG — это векторное воссоздание шрифта, что делает его намного легче по размеру файла, а также делает его идеальным для мобильного использования. Этот формат является единственным, разрешенным в Safari для iOS версии 4.1 и ниже. Шрифты SVG в настоящее время не поддерживаются Firefox, IE или IE Mobile. Firefox отложил реализацию на неопределенный срок, чтобы сосредоточиться на WOFF.

SVGZ — это заархивированная версия SVG.

EOT

Расшифровывается как: встроенный открытый тип.

Этот формат был создан Microsoft (оригинальными новаторами @font-face) и является проприетарным файловым стандартом, поддерживаемым только IE. Фактически, это единственный формат, который IE8 и более ранние версии распознают при использовании @font-face.

ОТФ/ТТФ

Обозначает: шрифт OpenType и шрифт TrueType.

Формат WOFF изначально был создан как реакция на OTF и TTF, отчасти потому, что эти форматы можно было легко (и нелегально) скопировать. Однако у OpenType есть возможности, которые могут заинтересовать многих дизайнеров (лигатуры и тому подобное).

Примечание о производительности

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

Обычным симптомом раньше был короткий момент, когда шрифты сначала загружались в качестве запасных, а затем мигали загруженным шрифтом. У Пола Айриша есть более старый пост на эту тему (под названием «FOUT»: Flash Of Unstyled Text).

В наши дни браузеры обычно скрывают текст перед загрузкой пользовательского шрифта по умолчанию. Лучше или хуже? Вам решать. Вы можете осуществлять некоторый контроль над этим с помощью различных методов. Немного выходит за рамки этой статьи, но вот три статьи Зака ​​Лезермана, которые помогут вам сориентироваться в кроличьей норе:

• Улучшение @font-face с событиями загрузки шрифта
• Как мы ответственно используем веб-шрифты или избегаем @font-face-palm
• Flash of Faux Text — еще больше о загрузке шрифтов

Вот еще несколько соображений при реализации пользовательских шрифтов:

Следите за размером файла

Шрифты могут быть на удивление тяжелыми, поэтому склоняйтесь к вариантам с более легкими версиями. Например, предпочтите набор шрифтов размером 50 КБ, а не тот, который весит 400 КБ.

Ограничьте набор символов, если это возможно

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

Рассмотрите системные шрифты для маленьких экранов

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

В этом примере для экранов размером менее 1000 пикселей вместо этого будет использоваться системный шрифт, а для экранов шириной и выше будет использоваться пользовательский шрифт.

 

@media (min-width: 1000px) {
 body {
  font-family: 'FontName', Fallback, sans-serif;
 }
}

 

Службы шрифтов

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

Вот несколько сервисов предлагающих шрифты:

• Cloud Typography
• Typekit
• Fontdeck
• Webtype
• Fontspring
• Typotheque
• Fonts.com
• Google Fonts
• Font Squirrel

Как насчет иконочных шрифтов?

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