@font-face

@font-face CSS @-правило вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція local() вказує ім'я шрифта то його пошук буде відбуватися  на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції url() будуть завантажені і використані

Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.

Поширеним випадком є використання url() і local() разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.

@font-face @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого @-правила.

@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 . Починаючи з Firefox 61 (та інших сучасних браузерів)  font-stretch також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-stretch: 50% 200%;
font-style
Значення font-style. Починаючи з Firefox 61 (і інших сучасних браузерів) font-style.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-style: oblique 20deg 50deg;
font-weight
Значення font-weight. Починаючи з Firefox 61 (і інших сучасних браузерів) font-weight також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-weight: 100 400;
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("truetype");

Достіпні типи: "woff", "woff2", "truetype", "opentype", "embedded-opentype", і "svg".

unicode-range
Діапазон  Unicode кодів, що буде використовуватись в шрифті.

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

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
where 
<family-name> = <string> | <custom-ident>+

Приклади

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

Дивитися live приклад

<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>

В цьому прикладі використовується локальний шрифт користувача "Helvetica Neue Bold"; якщо у користувача цей шрифт не встановлений тоді натомість використовується завантажуваний шрифт "MgOpenModernaBold.ttf":

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

MIME-типи шрифтів

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Нотатки

  • Веб шрифти підлягають одному і тому ж обмеженню доменів (файли шрифтів повинні знаходитись на тому ж домен, що і сторінка на яких вони використовуться) ,  HTTP контроль доступу використовується для полегшення цього обмеження.
  • @font-face не може бути оголошеним в CSS селекторі. Наприклад наступне не працюватиме: 
    .className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
         local("HelveticaNeue-Bold"),
         url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

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

Специфікація Статус Коментар
WOFF File Format 2.0
The definition of 'WOFF2 font format' in that specification.		 Recommendation Специфікація фомату шрифта з новим алгоритмом стиснення
WOFF File Format 1.0
The definition of 'WOFF font format' in that specification.		 Recommendation Специфікація формата шрифта
CSS Fonts Module Level 3
The definition of '@font-face' in that specification.		 Recommendation Початкове визначення

Підтримка браузерів 

BCD tables only load in the browser

Прогляньте також