Перейти к содержанию

@font-face

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

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

Синтаксис

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'), url('/fonts/OpenSans-Regular-webfont.woff')
      format('woff');
}

Дескрипторы правила

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

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

Поддержка браузерами

Can I Use fontface? Data on support for the fontface feature across the major browsers from caniuse.com.

Описание и примеры

```html tab="HTML" Web Font Sample