Правило CSS @font-face

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

Сначала мы должны задать имя шрифта (например, myFirstFont) в новом правиле @font-face, а затем указать путь к файлу шрифта.

У каждого браузера свой формат. Мы используем форматы ttf, otf, eot, svg, svgz, woff, woff2.

OTF / TTF

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

EOT

Формат Embedded Open Type, созданный Microsoft (первоначальными новаторами @font-face) более 15 лет назад, — это единственный формат, который IE8 и более ранние версии распознают при использовании @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) — это векторный формат шрифта. Однако SVG-шрифты устарели и были удалены из всех современных браузеров. Их больше не рекомендуется использовать в новых проектах. SVGZ — это сжатая версия SVG.

WOFF/WOFF2

Web Open Font Format, созданный для использования в вебе и разработанный Mozilla совместно с другими организациями, шрифты WOFF часто загружаются быстрее, чем другие форматы, потому что используют сжатую версию структуры, применяемой шрифтами OpenType (OTF) и TrueType (TTF). WOFF2 — это новое поколение WOFF, и у него лучшее сжатие.

При использовании пользовательских шрифтов следует учитывать следующие моменты:

Размер файла. Рекомендуется использовать варианты с более лёгкими версиями.
Ограничения набора символов. Можно ограничить наборы шрифтов, чтобы загружались только используемые шрифты.
Системные шрифты для небольших экранов. Одно из решений — применять правило к большим экранам, когда пользовательский шрифт загружается с помощью @media.

Синтаксис

Синтаксис правила CSS @font-face

css

@font-face {
  font-properties
}

Пример правила @font-face:

Пример правила CSS @font-face с форматами EOT, TTF, SVG, WOFF и WOFF2

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Try it Yourself »

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

Максимально возможная поддержка браузерами

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

Правило @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Затем оно используется для стилизации элементов следующим образом:

Правило CSS @font-face

css

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Практический уровень поддержки браузерами

Поскольку WOFF и WOFF2 используются довольно часто, мы можем использовать следующее:

Правило CSS @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Сверхпрогрессивная поддержка браузерами

Если мы работаем с WOFF, можно ожидать, что в какой-то момент можно будет использовать WOFF2:

Правило CSS @font-face

css

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Альтернативные техники

В некоторых ситуациях лучше использовать размещённый на хостинге шрифт. Это предлагает Google Fonts как способ использовать их шрифты. В следующем коде @import используется для загрузки шрифта из Google Fonts:

Правило CSS @font-face

css

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Затем его можно использовать для стилизации элементов:

Правило CSS @font-face

css

body {
  font-family: 'Open Sans', sans-serif;
}

У размещённого сервиса есть преимущество. Вероятно, он будет включать все варианты файла шрифта, обеспечивая широкую кроссбраузерную совместимость, и нам не придётся самостоятельно размещать эти файлы.

Правило CSS @font-face

css

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Аналогично, таблицу стилей можно подключить к тому же ресурсу в <head> HTML-документа, а не в CSS.

HTML

html

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Затем элементы можно стилизовать так же, как и другими способами:

CSS

css

body {
  font-family: 'Open Sans', sans-serif;
}

Снова правила @font-face импортируются, но они добавляются в HTML <head>:

CSS

css

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Пример правила @font-face с использованием Google Fonts:

HTML

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Try it Yourself »

Значения

Font Descriptor	Values	Description
font-family	name	It defines the font's name and it is a requirement.
src	URL	It defines the URL where the font will be downloaded and it is a requirement.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	It defines how the font will be stretched. Its default value is normal and it is optional.
font-style	normal italic oblique	It defines how the font will be styled. Its default value is normal and it is optional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	It defines the font boldness. Its default value is normal and it is optional.
unicode-range	unicode-range	It defines the range of unicode characters the font supports. Its default value is U+0-10FFFF and it is optional.

Практика

What is the purpose of the @font-face rule in CSS?

To specify a custom font in your web pageTo change the background color of a websiteTo add an external style sheet to a HTML documentTo embed a font into a web pageTo control the layout of a web page

Правило CSS @font-face ​

OTF / TTF ​

EOT ​

SVG/SVGZ ​

WOFF/WOFF2 ​

Синтаксис ​

Пример правила @font-face: ​

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

Максимально возможная поддержка браузерами ​

Практический уровень поддержки браузерами ​

Сверхпрогрессивная поддержка браузерами ​

Альтернативные техники ​

Пример правила @font-face с использованием Google Fonts: ​

Значения ​

Практика ​

Правило CSS @font-face

OTF / TTF

EOT

SVG/SVGZ

WOFF/WOFF2

Синтаксис

Пример правила @font-face:

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

Максимально возможная поддержка браузерами

Практический уровень поддержки браузерами

Сверхпрогрессивная поддержка браузерами

Альтернативные техники

Пример правила @font-face с использованием Google Fonts:

Значения

Практика