@font-face

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

CSS @-правило @font-face позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url(). @font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила.

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

Значение 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-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции 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

Диапазон Unicode кодов, который будет использоваться в шрифте.

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-селектора. Следующий пример не будет работать:

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

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

@font-face = 
@font-face { <declaration-list> }

Примеры

Использование загружаемого шрифта

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

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
      @font-face {
        font-family: "Bitstream Vera Serif Bold";
        src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
      }

      body {
        font-family: "Bitstream Vera Serif Bold", serif;
      }
    </style>
  </head>
  <body>
    Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические
    символы).
  </body>
</html>

Результат будет таким:

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

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

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

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

Specification
CSS Fonts Module Level 4
# font-face-rule

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-face
OpenType CBDT and CBLC rendering
OpenType COLRv0 rendering
OpenType COLRv1 rendering
OpenType SBIX rendering
OpenType SVG rendering
SVG fonts
DeprecatedNon-standard
WOFF
WOFF 2
ascent-override
descent-override
font-display
font-family
font-feature-settings
font-stretch
font-style
font-variant
Non-standard
font-variation-settings
font-weight
line-gap-override
size-adjust
src
Drop invalid item (not src string)
format(keyword)
format('*-variations')
Non-standard
tech(keyword)
unicode-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Смотрите также