Шрифты в HTML и CSS: что важно понять сразу

Результат этой инструкции: на вашем сайте загружается нужный шрифт, текст не мигает при открытии страницы и не подтягивает лишние мегабайты. Займёт 20–40 минут, если файлы шрифта уже есть, и час, если нужно скачать и подготовить их с нуля. Работаем с чистым HTML и CSS — без препроцессоров и сборщиков, всё копируется и вставляется.

Никакой особой программы не нужно: хватит текстового редактора и браузера. Chrome или Firefox любой свежей версии подойдут — правила @font-face и свойство font-display в них работают одинаково.

Что нужно иметь до начала

• Файлы шрифта в формате woff2. Это основной формат для веба: сжатие лучше, чем у woff и ttf. Поддерживается всеми браузерами, которые сейчас в ходу.
• Право использовать шрифт на сайте. Не каждый шрифт с компьютера можно выложить в веб. У Google Fonts лицензия свободная, у коммерческих шрифтов бывает отдельная веб-лицензия — проверьте перед публикацией.
• Доступ к папке сайта, куда вы кладёте CSS и картинки. Файлы шрифта лягут рядом.

Если у вас только ttf или otf, сконвертируйте их в woff2 через любой веб-конвертер шрифтов. Один файл на одно начертание: обычный, жирный, курсив — это разные файлы.

Способ первый: подключить с Google Fonts

Самый быстрый путь, если шрифт есть в каталоге Google Fonts. Вы не храните файлы у себя — их отдаёт CDN Google.

1. Откройте fonts.google.com, выберите шрифт и нужные начертания. Каждое начертание — это вес (400, 700) и стиль (обычный, курсив).

2. Google выдаст блок с тегом <link>. Вставьте его в <head> вашей страницы:

   <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@400;700&display=swap" rel="stylesheet">

   Обратите внимание на display=swap в конце ссылки — про него ниже, это не декорация.

3. Пропишите шрифт в CSS:

   body {
     font-family: "Inter", sans-serif;
   }

Проверка: откройте страницу, нажмите F12, вкладка Network, обновите с очисткой кеша. В списке запросов должны появиться файлы шрифта с домена fonts.gstatic.com, а текст на странице — отрисоваться выбранным шрифтом.

Способ второй: положить файлы к себе через @font-face

Этот вариант нужен, если шрифта нет в Google Fonts, если вы не хотите обращений к сторонним доменам или собираете сайт под требования по локальному хранению данных. Файлы лежат у вас, вы контролируете всё.

1. Скопируйте файлы woff2 в папку сайта, например /fonts/.

2. Опишите шрифт в CSS через @font-face. Одно правило — одно начертание:

   /* Обычное начертание */
   @font-face {
     font-family: "MyFont";
     src: url("/fonts/myfont-regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   
   /* Жирное начертание — отдельный файл */
   @font-face {
     font-family: "MyFont";
     src: url("/fonts/myfont-bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }

   Имя font-family у обоих правил одинаковое. Браузер сам выберет нужный файл, когда встретит font-weight: 700 в стилях.

3. Примените шрифт:

   body {
     font-family: "MyFont", sans-serif;
   }
   
   strong, b {
     font-weight: 700;
   }

Проверка: во вкладке Network браузера файл myfont-regular.woff2 должен грузиться со статусом 200, а не 404. Жирный текст должен стать жирным за счёт файла, а не искусственного утолщения браузером.

Что за font-display: swap и почему это важно сразу

Пока шрифт грузится, браузер должен решить, что показывать. Свойство font-display задаёт это поведение. Без него на медленной сети пользователь несколько секунд видит пустое место вместо текста — это называют FOIT (Flash of Invisible Text).

Значение swap говорит браузеру: сразу покажи текст запасным шрифтом, а когда загрузится основной — замени. Текст читается с первой миллисекунды, но при замене может дёрнуться (это FOUT — Flash of Unstyled Text).

Выбор между FOIT и FOUT — это выбор между «текста нет вовсе» и «текст есть, но перерисуется». Для большинства сайтов второе меньшее зло: пустая страница отпугивает сильнее, чем скачок шрифта.

FOIT и FOUT

FOIT — период, когда текст невидим, пока грузится шрифт. FOUT — момент, когда текст сначала показан запасным шрифтом, а потом переключился на основной. Оба эффекта видны доли секунды на быстрой сети и куда дольше на мобильном интернете.

Запасной шрифт — не формальность

Вторая часть font-family (после запятой) — это то, что увидит пользователь, пока основной шрифт грузится или если он не загрузился вовсе. Не оставляйте там пусто и не пишите наугад.

Правило: подбирайте запасной шрифт близкой ширины и высоты к основному. Тогда при замене (FOUT) текст меньше прыгает. Для гротесков вроде Inter подойдёт sans-serif, для антикв — serif.

body {
  /* system-ui — системный шрифт устройства, грузится мгновенно */
  font-family: "Inter", system-ui, sans-serif;
}

Не грузите то, что не используете

Каждое начертание — отдельный файл и отдельный запрос. Пять весов шрифта — это пять загрузок. Если на сайте текст только обычный и жирный, подключайте только 400 и 700. Курсив и тонкие веса, которые нигде не встречаются, — лишний трафик и замедление первой отрисовки.

Проверьте по своим стилям, какие font-weight реально используются, и оставьте только их.

Если не получилось

• Текст остался системным шрифтом. Откройте Network, найдите файл шрифта. Статус 404 — неверный путь в url(). Путь считается от корня сайта, если начинается со слэша, или относительно самого CSS-файла, если без слэша.
• В консоли ошибка про CORS или «Access-Control-Allow-Origin». Шрифт лежит на другом домене или поддомене, а сервер не отдаёт нужный заголовок. Либо положите файлы на тот же домен, либо настройте Access-Control-Allow-Origin на сервере со шрифтами.
• Жирный текст выглядит «размазанным», а не настоящим жирным. Браузер утолщает обычное начертание искусственно, потому что файла для веса 700 нет. Добавьте отдельное @font-face с жирным файлом.
• Формат не поддерживается, в консоли «Failed to decode downloaded font». Файл повреждён при конвертации или это не woff2. Перегенерируйте из исходного ttf/otf.
• Текст мигает при каждом переходе. Шрифт не кешируется. Проверьте, что сервер отдаёт заголовок Cache-Control на файлы шрифта — иначе браузер грузит их заново на каждой странице.

Что настроить дальше

Когда базовое подключение работает, посмотрите на две вещи. Первое — <link rel="preload"> для основного файла шрифта: он подскажет браузеру начать загрузку раньше, что сокращает время до отрисовки текста. Второе — подмножество символов (subsetting): если сайт только на кириллице, латинские и другие глифы из файла можно вырезать и уменьшить его в разы. Инструменты вроде glyphhanger делают это по вашему тексту.

Показатель, за которым стоит следить в проде, — CLS (Cumulative Layout Shift) в PageSpeed Insights или в панели Web Vitals. Скачок при замене шрифта портит именно его, и подбор близкого запасного шрифта плюс preload заметно улучшают цифру.