@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 шрифтів

Формат Тип MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font 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;
      }
    }
    

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

@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;
}

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
@font-face
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 4
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
SVG fonts
Нерекомендоване Нестандартне
Chrome No support 1 –  38
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support 15 –  25
Safari Full support 3.1
WebView Android No support 37 –  38
Chrome Android No support 18 –  38
Firefox for Android No support Ні
Opera Android No support 14 –  25
Safari on iOS Full support 3
Samsung Internet No support 1.0 –  3.0
WOFF
Chrome Full support 6
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 9
Opera Full support 11.1
Safari Full support 5.1
WebView Android Full support 4.4
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 11.1
Safari on iOS Full support 5
Samsung Internet Full support 1.0
WOFF 2
Chrome Full support 36
Edge Full support 14
Firefox Full support 39
Internet Explorer No support Ні
Opera Full support 23
Safari Full support 10
footnote
WebView Android Full support 37
Chrome Android Full support 36
Firefox for Android Full support 39
Opera Android Full support 24
Safari on iOS Full support 10
Samsung Internet Full support 3.0
ascent-override Chrome Full support 87
Edge Full support 87
Firefox Full support 89
Internet Explorer No support Ні
Opera Full support 73
Safari No support Ні
WebView Android Full support 87
Chrome Android Full support 87
Firefox for Android Full support 89
Opera Android Full support 62
Safari on iOS No support Ні
Samsung Internet Full support 14.0
descent-override Chrome Full support 87
Edge Full support 87
Firefox Full support 89
Internet Explorer No support Ні
Opera Full support 73
Safari No support Ні
WebView Android Full support 87
Chrome Android Full support 87
Firefox for Android Full support 89
Opera Android Full support 62
Safari on iOS No support Ні
Samsung Internet Full support 14.0
font-display Chrome Full support 60
Edge Full support 79
Firefox Full support 58
Internet Explorer No support Ні
Opera Full support 47
Safari Full support 11.1
WebView Android Full support 60
Chrome Android Full support 60
Firefox for Android Full support 58
Opera Android Full support 44
Safari on iOS Full support 11.3
Samsung Internet Full support 11.0
font-family Chrome Full support 4
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 6
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 2.2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
font-feature-settings
Chrome No support Ні
Edge No support Ні
Firefox Full support 34
footnote
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 34
footnote
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
font-stretch Chrome Full support 62
Edge Full support 17
Firefox Full support 62
Internet Explorer No support Ні
Opera Full support 49
Safari Full support 10.1
WebView Android Full support 62
Chrome Android Full support 62
Firefox for Android Full support 62
Opera Android Full support 41
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
font-style Chrome Full support 4
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 4
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
font-variant Chrome Full support 4
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 4
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
font-variation-settings Chrome No support Ні
Edge No support Ні
Firefox Full support 62
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 62
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
font-weight Chrome Full support 4
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 4
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
line-gap-override Chrome Full support 87
Edge Full support 87
Firefox Full support 89
Internet Explorer No support Ні
Opera Full support 73
Safari No support Ні
WebView Android Full support 87
Chrome Android Full support 87
Firefox for Android Full support 89
Opera Android Full support 62
Safari on iOS No support Ні
Samsung Internet Full support 14.0
size-adjust Chrome Full support 92
Edge Full support 92
Firefox Full support 92
Internet Explorer No support Ні
Opera Full support 78
Safari No support Ні
WebView Android Full support 92
Chrome Android Full support 92
Firefox for Android Full support 92
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet Full support 16.0
src Chrome Full support 4
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 6
Opera Full support 10
Safari Full support 3.1
WebView Android Full support 2.2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0
format(keyword)
Chrome No support Ні
Edge No support Ні
Firefox No support Ні
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 4
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 5
Samsung Internet No support Ні
format(\'*-variations\')
Нестандартне
Chrome Full support 66
Edge Full support 17
Firefox Full support 62
Internet Explorer No support Ні
Opera Full support 53
Safari Full support 11
WebView Android Full support 66
Chrome Android Full support 66
Firefox for Android Full support 62
Opera Android Full support 47
Safari on iOS Full support 11
Samsung Internet Full support 9.0
unicode-range Chrome Full support 1
Edge Full support 12
Firefox Full support 36
Internet Explorer Full support 9
Opera Full support 15
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 36
Opera Android Full support 14
Safari on iOS Full support 3
Samsung Internet Full support 1.0

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