Правило CSS @font-face

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

На этой странице рассматриваются форматы шрифтов, которые можно использовать, способ написания надёжного объявления @font-face с запасными вариантами, свойство font-display, управляющее поведением при загрузке, доступные дескрипторы шрифтов, а также альтернативный вариант использования размещённого сервиса, например Google Fonts.

Как работает @font-face

Правило @font-face выполняет два действия:

Оно определяет имя шрифта с помощью дескриптора font-family (например, myFirstFont).
Оно указывает на один или несколько файлов шрифта с помощью дескриптора src.

После объявления вы ссылаетесь на шрифт по этому имени в любом обычном правиле font-family, точно так же, как на системный шрифт:

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

p {
  font-family: 'myFirstFont', sans-serif;
}

Всегда завершайте стек font-family общим запасным шрифтом (например, sans-serif), чтобы текст оставался читаемым при сбое загрузки файла шрифта.

Форматы шрифтов

Браузеры поддерживают несколько форматов файлов шрифтов: ttf, otf, eot, svg, svgz, woff и woff2. Для современного веба вам нужен только WOFF2 (с WOFF в качестве запасного варианта для старых браузеров); остальные форматы являются устаревшими.

OTF-TTF

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

EOT

Формат Embedded Open Type, созданный компанией Microsoft (первооткрывателями @font-face) более 15 лет назад, является единственным форматом, который распознаёт IE8 и более ранние версии при использовании @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) — это векторный формат шрифтов. Однако SVG-шрифты признаны устаревшими и удалены из всех современных браузеров. Использование в новых проектах больше не рекомендуется. SVGZ — это сжатая версия SVG.

WOFF/WOFF2

Web Open Font Format, созданный для использования в вебе и разработанный Mozilla совместно с другими организациями. Шрифты WOFF нередко загружаются быстрее других форматов, поскольку используют сжатую версию структуры шрифтов OpenType (OTF) и TrueType (TTF). WOFF2 — это новое поколение WOFF с улучшенным сжатием.

При использовании пользовательских шрифтов следует учитывать следующие факторы:

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

Синтаксис

Синтаксис правила CSS @font-face

@font-face {
  font-properties
}

Пример правила @font-face:

Пример правила CSS @font-face с форматами EOT, TTF, SVG, WOFF и WOFF2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Попробуйте сами »

Управление загрузкой с помощью font-display

Пока веб-шрифт загружается, браузер должен решить, что отображать. Дескриптор font-display управляет компромиссом между миганием невидимого текста (FOIT) и миганием неоформленного текста (FOUT):

auto — поведение по умолчанию для браузера (обычно аналогично block).
block — кратковременно скрывает текст (до ~3 с), затем отображает веб-шрифт. Вызывает FOIT.
swap — немедленно отображает запасной текст, а затем заменяет его веб-шрифтом после загрузки. Лучший вариант для основного текста, так как содержимое никогда не оказывается невидимым.
fallback — короткий период блокировки, затем запасной вариант; веб-шрифт заменяет его только при быстрой загрузке.
optional — аналогично fallback, но браузер может полностью пропустить веб-шрифт при медленном соединении.

swap является наиболее распространённым выбором и используется во всех примерах ниже.

Поддержка браузеров

Максимально глубокая поддержка браузеров

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

Правило @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

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

Правило CSS @font-face

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

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

Поскольку WOFF и WOFF2 широко используются, можно применять следующее:

Правило CSS @font-face

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

Прогрессивная поддержка браузеров

Если вы работаете с WOFF, можно ожидать, что в какой-то момент будет использоваться WOFF2:

Правило CSS @font-face

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

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

В некоторых ситуациях лучше использовать размещённый шрифт. Это предлагает Google Fonts как способ работы с их шрифтами. В следующем примере @import используется для загрузки шрифта из Google Fonts:

Правило CSS @font-face

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

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

Правило CSS @font-face

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

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

Правило CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Аналогичным образом таблицу стилей можно подключить к тому же ресурсу в <head> HTML-документа, а не в CSS.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

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

CSS

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

Опять же, правила @font-face импортируются, но они добавляются в HTML <head>:

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Пример правила @font-face с использованием Google Fonts:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Попробуйте сами »

Значения

Дескриптор шрифта	Значения	Описание
font-family	name	Определяет имя шрифта и является обязательным.
src	URL	Определяет URL, по которому будет загружен шрифт, и является обязательным.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Определяет, как шрифт будет растягиваться. Значение по умолчанию — normal, является необязательным.
font-style	normal italic oblique	Определяет стиль отображения шрифта. Значение по умолчанию — normal, является необязательным.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Определяет жирность шрифта. Значение по умолчанию — normal, является необязательным.
unicode-range	unicode-range	Определяет диапазон символов Unicode, поддерживаемых шрифтом. Значение по умолчанию — U+0-10FFFF, является необязательным.

Использование local() в src

Внутри src можно указать local('Font Name') перед записями url(). Браузер будет использовать подходящий шрифт, уже установленный на компьютере пользователя, и загружать файл только в случае его отсутствия, экономя пропускную способность:

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Связанные главы

@import — подключение другой таблицы стилей, включая CSS размещённого шрифта.
@media — условная загрузка пользовательских шрифтов, например только для больших экранов.
font-family, font-weight и font-style — применение определённого вами шрифта.

Практика

Каково назначение правила @font-face в CSS?

Задать пользовательский шрифт для вашей веб-страницыИзменить цвет фона веб-сайтаДобавить внешнюю таблицу стилей к HTML-документуВстроить шрифт в веб-страницуУправлять макетом веб-страницы