CSS-правило `@font-face`

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

Синтаксис

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.woff2") format("woff2") tech(color-COLRv1),
    url("trickster-outline.woff2") format("woff2");
}

Дескрипторы

ascent-override

Задаёт метрику восходящих элементов шрифта.

descent-override

Задаёт метрику нисходящих элементов шрифта.

font-display

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

font-family

Задаёт имя, которое будет использоваться в качестве значения семейства шрифтов для свойств шрифта. Для корректности правила @font-face требуется имя font-family.

font-stretch

Значение font-stretch. Принимает два значения, задающие диапазон, поддерживаемый начертанием шрифта, например font-stretch: 50% 200%;

font-style

Значение font-style. Принимает два значения, задающие диапазон, поддерживаемый начертанием шрифта, например font-style: oblique 20deg 50deg;

font-weight

Значение font-weight. Принимает два значения, задающие диапазон, поддерживаемый начертанием шрифта, например font-weight: 100 400;

font-feature-settings

Позволяет управлять расширенными типографическими функциями шрифтов OpenType.

font-variation-settings

Позволяет управлять вариациями шрифтов OpenType или TrueType на низком уровне, указывая четырёхбуквенные имена осей для изменяемых функций и соответствующие значения вариаций.

font-width

Позволяет авторам указывать обычное, сжатое или расширенное начертание для заданных шрифтов.

line-gap-override

Задаёт метрику межстрочного интервала шрифта.

size-adjust

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

src

Задаёт ссылки на ресурсы шрифтов, включая сведения о формате и технологии шрифта. Для корректности правила @font-face требуется значение src.

unicode-range

Диапазон кодовых точек Unicode, используемых из шрифта.

Описание

Часто url() и local() используют вместе: если установленная у пользователя копия шрифта доступна, используется она; в противном случае браузер скачивает копию шрифта, если на устройстве пользователя она не найдена.

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

Браузеры пытаются загружать ресурсы в порядке их объявления в списке, поэтому обычно local() следует указывать перед url(). Обе функции необязательны, поэтому допустим блок правила, содержащий только один или несколько local() без url(). Если нужны более конкретные шрифты со значениями format() или tech(), их следует указывать перед вариантами без этих значений, иначе сначала будет использован менее конкретный вариант.

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

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

Правило @font-face можно использовать не только на верхнем уровне CSS, но и внутри любого условного группового правила CSS.

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

Примечания

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

• @font-face нельзя объявлять внутри CSS-селектора. Например, следующий код не будет работать:

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

Формальный синтаксис

Примеры

Указание загружаемого шрифта

В этом примере задаётся загружаемый шрифт, который применяется ко всему содержимому документа:

<body>
  This is Bitstream Vera Serif Bold.
</body>

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

Указание локальных альтернативных шрифтов

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

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

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

Совместимость с браузерами

См. также

• О формате WOFF
• Генератор веб-шрифтов Transfonter
• Красивые шрифты с помощью @font-face
• Библиотека шрифтов