Подключение шрифтов без потери скорости: пошаговая инструкция

К концу инструкции у вас будет подключён собственный шрифт, который отдаётся с вашего домена, весит меньше 30–50 КБ на начертание, показывается сразу и не блокирует отрисовку страницы. На всю работу уйдёт около полутора часов, если вы уже знаете, где лежат HTML и CSS вашего сайта. Отдельные знания шрифтовой типографики не нужны — только браузер, доступ к файлам сайта и любой текстовый редактор.

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

• Доступ к файлам сайта: FTP, SFTP, панель хостинга или папка проекта локально.
• Возможность редактировать HTML <head> и CSS-файл. Для WordPress это может быть тема или плагин, вставляющий код в шапку.
• Файлы шрифта. Если у вас только .ttf или .otf — их нужно будет сконвертировать в .woff2 (шаг 2).
• Право использовать шрифт на сайте. У бесплатных шрифтов с Google Fonts лицензия это разрешает, у коммерческих — проверьте, входит ли web embedding в вашу покупку.

Пример ниже — на шрифте Inter, но подойдёт любой. Проверялось в Chrome 120+, Firefox 120+ и Safari 17. Формат woff2 поддерживают все актуальные браузеры.

Шаг 1. Возьмите только нужные начертания

Главная причина, по которой шрифты тормозят страницу, — их грузят пачкой. Дизайнер подключил девять начертаний, а на сайте реально используются два: обычный (400) и полужирный (700). Каждое лишнее начертание — это отдельный файл на 30–100 КБ.

Определите, что реально нужно. Откройте страницу и посмотрите: заголовки обычно bold, основной текст — regular, иногда есть курсив. Больше трёх начертаний на типовом сайте почти не встречается.

Проверка: у вас на руках список вида «Inter Regular 400, Inter Bold 700» — и не больше. Если начертаний вышло пять и более, вернитесь и уточните у дизайна, где они применяются.

Шаг 2. Сконвертируйте в woff2

woff2 — сжатый формат, который весит на 30–50% меньше .ttf при том же качестве. Отдавать браузеру .ttf в 2024 году смысла нет.

Если шрифт с Google Fonts — файлы .woff2 уже готовы, их можно скачать через сервис google-webfonts-helper (он отдаёт woff2 и готовый CSS). Если у вас .ttf от коммерческого шрифта — сконвертируйте его официальным инструментом woff2 от Google или любым онлайн-конвертером, которому вы доверяете загрузку файла.

Команда для консольного woff2 (собранного из исходников):

# Конвертация одного файла .ttf в .woff2
# Рядом появится Inter-Regular.woff2
woff2_compress Inter-Regular.ttf

Проверка: в папке лежат файлы с расширением .woff2, каждый обычно 15–60 КБ на латиницу с кириллицей.

Шаг 3. Положите файлы на свой сервер

Self-hosting — держать шрифты на своём домене, а не грузить с fonts.googleapis.com. Так вы убираете лишнее соединение с чужим доменом и не зависите от его доступности. С точки зрения приватности это тоже чище.

Создайте папку, например /fonts/ в корне сайта, и загрузите туда .woff2. Для WordPress подойдёт папка внутри дочерней темы — /wp-content/themes/ваша-тема/fonts/.

Проверка: откройте файл напрямую в браузере по адресу вида https://ваш-сайт/fonts/Inter-Regular.woff2 — браузер должен предложить скачать файл, а не показать 404.

Шаг 4. Опишите шрифт в CSS через @font-face

Здесь появляется ключевая строка — font-display: swap. Без неё браузер прячет текст, пока шрифт грузится: пользователь видит пустое место (эффект FOIT — flash of invisible text). Со swap текст сразу показывается системным шрифтом, а потом заменяется на ваш.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;      /* обычное начертание */
  font-style: normal;
  font-display: swap;    /* текст виден сразу, замена без мигания */
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;      /* полужирное — та же family, другой вес */
  font-style: normal;
  font-display: swap;
}

Обратите внимание: у обоих блоков одинаковое font-family: 'Inter', но разный font-weight. Браузер сам выберет нужный файл, когда в вёрстке встретит font-weight: 700. Не заводите отдельные имена вроде 'Inter Bold' — это ломает автоматический выбор.

Проверка: откройте DevTools → вкладка Network, отфильтруйте по Font. При загрузке страницы в списке должны появиться ваши .woff2 со статусом 200.

Шаг 5. Примените шрифт и задайте fallback

Fallback — запасной шрифт, который покажется, пока грузится ваш, и если он не загрузится вовсе. Указывайте системные шрифты, максимально близкие по метрике.

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

Проверка: текст на странице отображается вашим шрифтом. Если вы отключите сеть в DevTools и перезагрузите — текст останется читаемым системным шрифтом, а не исчезнет.

Шаг 6. Добавьте preload для критичного начертания

По умолчанию браузер узнаёт о шрифте только когда распарсит CSS и наткнётся на элемент, использующий его. Это поздно. preload говорит браузеру начать загрузку файла сразу.

Подгружайте так только то, что видно на первом экране — обычно основной текст (400). Прелоад лишних файлов вредит: он же конкурирует за канал с картинками и скриптами.

<!-- В <head>, до подключения CSS -->
<link rel="preload" href="/fonts/Inter-Regular.woff2"
      as="font" type="font/woff2" crossorigin>

Атрибут crossorigin здесь обязателен, даже если файл на вашем домене — шрифты всегда грузятся в режиме CORS, и без него браузер загрузит файл дважды.

Проверка: в Network файл Inter-Regular.woff2 стартует в самом начале загрузки страницы, а не в середине.

Самое частое, что убивает скорость, — не сам шрифт, а привычка подключить восемь начертаний «на всякий случай» и оставить дефолтный блокирующий рендер. Два файла и одна строка font-display: swap решают 90% проблемы.

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

• Шрифт не применяется, в консоли Failed to decode downloaded font. Файл повреждён при конвертации или загрузился как HTML (сервер отдал 404-страницу вместо файла). Проверьте путь в url() и что файл открывается напрямую.
• Текст мигает при загрузке — сначала один шрифт, потом другой. Это ожидаемое поведение swap. Уменьшить скачок помогает подбор fallback, близкого по ширине, и preload критичного файла.
• Браузер грузит файл шрифта дважды. Забыт атрибут crossorigin в теге preload. Добавьте его.
• 404 на файл шрифта, хотя путь верный. Проверьте регистр: на Linux-сервере Inter-Regular.woff2 и inter-regular.woff2 — разные файлы.
• Полужирный текст выглядит «искусственно жирным». Браузер не нашёл файл для веса 700 и синтезировал его из regular. Убедитесь, что @font-face для 700 подключён и путь верный.

Что делать дальше

После подключения прогоните страницу через Lighthouse (в DevTools вкладка Lighthouse) и посмотрите на метрику CLS — сдвиг макета из-за замены шрифта. Если он заметен, изучите свойства size-adjust и ascent-override в @font-face: они подгоняют метрику fallback под ваш шрифт и убирают скачок. Тонкая настройка сабсетов (оставить только используемые символы) — отдельная тема, здесь мы её не разворачивали; она даёт ещё минус 30–60% к весу для кириллицы.