@font-face

@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
 
@font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. 
 
Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
 
Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого  @-правила.
@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Синтаксис

Descriptors

font-display
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
font-family
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
font-stretch (en-US)
Значение font-stretch (en-US).
font-style (en-US)
Значение font-style.
font-weight (en-US)
Значение font-weight.
font-variant (en-US)
Значение font-variant (en-US).
font-feature-settings
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
font-variation-settings (en-US)
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
src (en-US)
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():

src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("opentype");

Список доступных форматов: "woff""woff2""truetype""opentype""embedded-opentype", и "svg".

unicode-range (en-US)
Диапазон Unicode кодов, который будет использоваться в шрифте.

Formal syntax

@font-face {
  [ (en-US) font-family: <family-name>; ] (en-US) || (en-US)
  [ (en-US) src: <src>; ] (en-US) || (en-US)
  [ (en-US) unicode-range: <unicode-range>; ] (en-US) || (en-US)
  [ (en-US) font-variant: <font-variant>; ] (en-US) || (en-US)
  [ (en-US) font-feature-settings: <font-feature-settings>; ] (en-US) || (en-US)
  [ (en-US) font-variation-settings: <font-variation-settings>; ] (en-US) || (en-US)
  [ (en-US) font-stretch: <font-stretch>; ] (en-US) || (en-US)
  [ (en-US) font-weight: <font-weight>; ] (en-US) || (en-US)
  [ (en-US) font-style: <font-style>; ] (en-US) || (en-US)
  [ (en-US) size-adjust: <size-adjust>; ] (en-US) || (en-US)
  [ (en-US) ascent-override: <ascent-override>; ] (en-US) || (en-US)
  [ (en-US) descent-override: <descent-override>; ] (en-US) || (en-US)
  [ (en-US) line-gap-override: <line-gap-override>; ] (en-US)
}

где
<family-name> = <string> (en-US) | (en-US) <custom-ident>+ (en-US)

Примеры

Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:

Смотреть живой пример

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

MIME-типы шрифтов

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Примечания

  • Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
  • @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
    .className {
      @font-face {
        font-family: MyHelvetica;
        src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
            url(MgOpenModernaBold.ttf);
        font-weight: bold;
      }
    }

Спецификации

Спецификация Статус Комментарии
WOFF File Format 2.0
Определение 'WOFF2 font format' в этой спецификации.
Рекомендация Спецификация нового формата шрифта с новым алгоритмом сжатия
WOFF File Format 1.0
Определение 'WOFF font format' в этой спецификации.
Рекомендация Спецификация формата шрифта
CSS Fonts Module Level 3
Определение '@font-face' в этой спецификации.
Рекомендация Первоначальное определение

Browser compatibility

BCD tables only load in the browser

See also