--- title: '@font-face' slug: Web/CSS/@font-face tags: - '@-правила' - '@font-face' - CSS - CSS Шрифти - Посилання - типографія - шрифти translation_of: Web/CSS/@font-face ---
{{CSSRef}}

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

Синтаксис

Опис

{{cssxref("@font-face/font-display", "font-display")}}
Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.
{{cssxref("@font-face/font-family", "font-family")}}
Задає ім'я, що буде використовуватися для задання властивостей шрифта.
{{cssxref("@font-face/font-stretch", "font-stretch")}}
Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів)  {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-stretch: 50% 200%;
{{cssxref("@font-face/font-style", "font-style")}}
Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-style: oblique 20deg 50deg;
{{cssxref("@font-face/font-weight", "font-weight")}}
Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-weight: 100 400;
{{cssxref("@font-face/font-variant", "font-variant")}}
Значення {{cssxref("font-variant")}}.
{{cssxref("font-feature-settings", "font-feature-settings")}}
Дозволяє контролювати інші розширені можлифості OpenType шрифтів.
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
Дозволяє здійснювати низькорівневий контроль над варіаціями шрифтів OpenType чи TrueType, вказуючи назви осей з чотирьох букв для зміни разом з їх значеннями.
{{cssxref("@font-face/src", "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".

{{cssxref("@font-face/unicode-range", "unicode-range")}}
Діапазон  Unicode кодів, що буде використовуватись в шрифті.

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

{{csssyntax}}

Приклади

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

Дивитися 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

Нотатки

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

Специфікація Статус Коментар
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}} {{Spec2('WOFF2.0')}} Специфікація фомату шрифта з новим алгоритмом стиснення
{{SpecName('WOFF1.0', '', 'WOFF font format')}} {{Spec2('WOFF1.0')}} Специфікація формата шрифта
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} {{Spec2('CSS3 Fonts')}} Початкове визначення

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

{{Compat("css.at-rules.font-face")}}

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