Веб-шрифты

В уроке «Текст и шрифты» шрифты брались с устройства читателя. Если нужен особенный шрифт, которого у читателя нет, его файл кладут на сайт и подключают. Такой шрифт называют веб-шрифтом: браузер скачивает его вместе со страницей.

Правило @font-face

@font-face объявляет шрифт: какое имя ему дать и где лежит файл. Для каждого начертания — обычного, жирного, курсива — пишут отдельное правило с одним и тем же именем:

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
 
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
 
body { font-family: "Inter", sans-serif; }

Теперь font-weight: 700 возьмёт второй файл. Формат woff2 — сжатый шрифт для веба: он в несколько раз легче старых форматов и понятен всем современным браузерам, так что другие форматы уже не нужны.

Имя — ваше

font-family внутри @font-face — просто имя, его придумываете вы. Функция local() берёт шрифт с устройства, поэтому этот пример работает без загрузки файлов:

<style>
  @font-face {
    font-family: "Заголовки";
    src: local("Georgia"), local("Times New Roman");
  }
  h2 { font-family: "Заголовки", serif; }
</style>
 
<h2>Заголовок шрифтом «Заголовки»</h2>
<p>Обычный текст шрифтом по умолчанию.</p>

Браузер пробует источники из src по порядку и берёт первый доступный.

Пока шрифт грузится: font-display

Файл шрифта приходит не сразу. Свойство font-display внутри @font-face решает, что показать в это время:

Для текста чаще всего выбирают swap: читатель видит слова сразу, а не пустую страницу.

Вариативные шрифты

Обычно каждое начертание — отдельный файл. Вариативный шрифт хранит все толщины в одном файле, и можно взять любую, хоть 550. В @font-face указывают диапазон font-weight: 100 900. Системный шрифт многих устройств тоже вариативный — если ваш такой, каждая строка будет толще предыдущей:

<style>
  p { font-family: system-ui, sans-serif; font-size: 20px; margin: 4px 0; }
</style>
 
<p style="font-weight: 200;">Толщина 200</p>
<p style="font-weight: 350;">Толщина 350</p>
<p style="font-weight: 550;">Толщина 550</p>
<p style="font-weight: 800;">Толщина 800</p>

У таких шрифтов бывают и другие оси — плавно меняемые параметры, например ширина букв. Ими управляет font-variation-settings: "wght" 550, "wdth" 80. Но для толщины удобнее обычный font-weight.

Google Fonts

В каталоге fonts.google.com выбирают шрифт и получают готовый код для <head>. Строки с preconnect заранее открывают соединение с серверами шрифтов, чтобы файл пришёл быстрее:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

wght@100..900 просит вариативный шрифт целиком, а display=swap — то же самое, что font-display: swap. Дальше в CSS пишут font-family: "Inter", sans-serif.

Свой сервер или CDN

CDN — чужой сервер, который раздаёт файлы, как Google Fonts. Подключить шрифт так проще всего, но браузер идёт на другой сайт, и посещение видит третья сторона. Файлы шрифта можно скачать и положить рядом с сайтом — это самостоятельный хостинг. Он не зависит от чужого сервера, и в Европе его часто выбирают ради приватности. В обоих случаях оставляйте запасной список: font-family: "Inter", system-ui, sans-serif.

Частая ошибка

Путь в url() считается от файла CSS, а не от HTML-страницы. Если стили лежат в css/style.css, а шрифты — в папке fonts рядом с css, путь url("fonts/inter.woff2") ведёт в несуществующую css/fonts/:

my-site/
├── index.html
├── css/
│   └── style.css    ← url("../fonts/inter.woff2")
└── fonts/
    └── inter.woff2

Браузер молча покажет запасной шрифт. Проверить, загрузился ли файл, можно во вкладке Network инструментов разработчика.