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

@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>
  <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>
@font-face {
  font-family: MyHelvetica;
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);
  font-weight: bold;
}