@font-face

Директива CSS @font-face (гарнітура шрифту) задає власний шрифт для виведення тексту; цей шрифт може бути як завантажений із віддаленого сервера, так і локально встановлений на власному комп'ютері користувача.

Синтаксис

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

Дескриптори

ascent-override

Задає метрику розміру верхнього виносу шрифту.

descent-override

Задає метрику розміру нижнього виносу шрифту.

font-display

Задає те, як гарнітура шрифту виводиться, залежно від того, чи вона завантажена й готова до використання, а також того, коли це відбувається.

font-family

Задає назву, котра буде використовуватися як значення гарнітури шрифту у властивостях шрифту.

font-stretch

Значення font-stretch. Приймає два значення для задання діапазону, котрий підтримується гарнітурою, наприклад, font-stretch: 50% 200%;

font-style

Значення font-style. Приймає два значення для задання діапазону, котрий підтримується гарнітурою, наприклад, font-style: oblique 20deg 50deg;

font-weight

Значення font-weight. Приймає два значення для задання діапазону, котрий підтримується гарнітурою, наприклад, font-weight: 100 400;

Примітка: Дескриптор font-variant був прибраний зі специфікації у 2018 році. Підтримуються значення властивості font-variant, але немає рівносильного дескриптора.

font-feature-settings

Дає змогу контролювати передові типографські можливості в шрифтах OpenType.

font-variation-settings

Дає змогу на низькому рівні контролювати варіації шрифтів TrueType та OpenType, шляхом задання чотирилітерних назв осей можливостей для видозміни, поруч з їхніми значеннями.

line-gap-override

Задає метрику розриву між рядками шрифту.

size-adjust

Задає множник для контурів гліфів та метрики, пов'язані з таким шрифтом. Завдяки цьому легше узгоджувати дизайн різних шрифтів при візуалізації з однаковим розміром шрифту.

src

Задає посилання на ресурси шрифту, включно з підказками щодо формату шрифту та його технології. Цей дескриптор є обов'язковою умовою дійсності директиви @font-face.

unicode-range

Діапазон кодових точок Unicode, що використовуватимуться зі шрифту.

Опис

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

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

Браузери пробують завантажувати ресурси в порядку їх оголошення, тож зазвичай local() слід писати перед url(). Обидві функції є необов'язковими, тож може бути блок правил, що містить одне чи більше входжень local(), але без url(). Якщо потрібні більш конкретні шрифти, зі значеннями format() або tech(), то вони повинні бути задані до версій, котрі не мають цих значень, адже інакше буде першим випробуваний і застосований менш конкретний варіант.

Даючи розробникам змогу задавати власні шрифти, @font-face уможливлює проєктування вмісту без обмеження так званими "безпечними для Вебу" шрифтами (тобто шрифтами, котрі так поширені, що вважаються загальнодоступними). Змога задати назву встановленого локально шрифту для його пошуку та застосування – уможливлює налаштування шрифту понад базові можливості, до того ж – без покладання на зв'язок з Інтернетом.

Примітка: Запасні стратегії завантаження шрифтів, для старих браузерів, описані на сторінці дескриптора src.

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

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

Примітки

• Шрифти у Вебі підлягають таким же доменним обмеженням (файли шрифтів повинні бути на тому ж домені, що й сторінка, котра їх використовує), якщо для їх послаблення не вжито контроль доступу HTTP.

• @font-face не може бути оголошена всередині селектора CSS. Наприклад, наступне не спрацює:

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

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

@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>; ] ||
  [ size-adjust: <size-adjust>; ] ||
  [ ascent-override: <ascent-override>; ] ||
  [ descent-override: <descent-override>; ] ||
  [ line-gap-override: <line-gap-override>; ]
}
де 
<family-name> = <string> | <custom-ident>+

Приклади

Задання шрифту для стягнення

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

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Зразок вебшрифту</title>
    <style media="screen, print">
      @font-face {
        font-family: "Bitstream Vera Serif Bold";
        src: url("https://webdoky.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":

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

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

Сумісність із браузерами

Дивіться також

• Про WOFF
• Генератор @font-face – FontSquirrel
• Прекрасні шрифти з допомогою @font-face
• Бібліотека шрифтів