Справочник HTML & CSS

@font-face

Подключает шрифт и даёт ему имя для использования в `font-family`.

Синтаксис

@font-face { font-family: name; src: url(…); }

Параметры

Параметр	Тип	Описание
font-family	name	Имя, под которым шрифт будет использоваться.
src	url()	Откуда его взять: `url("/fonts/brand.woff2") format("woff2")` или `local("Name")`.
font-weight \| font-style	descriptor	Какая насыщенность и начертание в этом файле.
font-display	swap	Что показывать во время загрузки; `swap` сразу показывает запасной шрифт.

Примеры

Шрифт с именем «Brand», собранный здесь из шрифтов, установленных на компьютере (на настоящем сайте src указывает на файл .woff2):

<style>
  @font-face {
    font-family: "Brand";
    src: local("Georgia"), local("Times New Roman");
    font-display: swap;
  }
  .brand { font-family: "Brand", serif; font-size: 24px; }
</style>
 
<p class="brand">Text in the font named Brand</p>

Примечания

Используйте формат woff2 — он самый лёгкий и поддерживается везде. Каждая насыщенность и начертание — отдельный @font-face с тем же font-family. Шрифтам с другого домена нужно разрешение (CORS) на том сервере.

См. также

font-family — Семейство шрифта со списком запасных вариантов.
url() — Ссылка на файл: картинку, шрифт, таблицу стилей.
font — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
font-display — Дескриптор `@font-face` (не обычное свойство): определяет, как выглядит текст, пока веб-шрифт ещё загружается.

Вопросы и ответы по теме

В учебнике

Текст и шрифты — Шрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.

Спасибо, что читаете!