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

Один шрифт в двух начертаниях — это 100–300 КБ, которые браузер должен скачать, прежде чем показать текст в нужном виде. Если сделать это неправильно, пользователь на секунду увидит пустоту вместо заголовков или дождётся резкого «прыжка», когда системный шрифт сменится на ваш. В конце вы получите подключённый шрифт, который загружается с приоритетом и не блокирует отрисовку текста. На настройку уйдёт 20–40 минут, если файлы шрифта у вас уже есть.

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

Прежде чем трогать код, соберите вводные — иначе застрянете на середине.

• Файлы шрифта в формате WOFF2. Это основной формат для всех актуальных браузеров (Chrome, Firefox, Safari, Edge последних версий). WOFF2 сжат лучше старого WOFF примерно на 30%. Форматы TTF/OTF/EOT для веба сегодня не нужны — они тяжелее и не дают ничего сверху.
• Право использовать шрифт на сайте. Не все шрифты, лежащие у вас на компьютере, разрешено встраивать в веб. Проверьте лицензию: у платных шрифтов веб-лицензия покупается отдельно. Google Fonts и большинство шрифтов с open-source лицензией (SIL OFL) встраивать можно.
• Доступ к <head> страницы и к CSS. Нужно вставить пару строк в шапку HTML и правила в таблицу стилей. Если у вас CMS — достаточно доступа к редактированию шаблона темы.
• Точный список начертаний, которые реально используются. Не грузите regular, bold, italic, light «на всякий случай». Каждое лишнее начертание — это ещё один файл и ещё одна задержка.

Если файлов в WOFF2 нет, а есть только TTF — сконвертируйте их. Google предоставляет свои шрифты сразу в WOFF2 при скачивании через сервис; для своих файлов используйте любой офлайн-конвертер или утилиту fonttools с плагином woff2.

Шаг 1. Разместите файлы у себя

Положите файлы шрифта в папку проекта, например /fonts/. Хранить шрифты на своём домене, а не грузить с внешнего CDN Google — это меньше сторонних соединений и предсказуемое поведение. Браузеру не придётся устанавливать отдельное защищённое соединение с чужим доменом ради одного файла.

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

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

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

@font-face {
  font-family: 'Inter';
  /* Только woff2 — этого достаточно для актуальных браузеров */
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* swap: сразу показать системный шрифт, заменить на свой при загрузке */
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

Что делает font-display

Это свойство управляет поведением на время загрузки. Основные значения:

• swap — сразу показать текст системным шрифтом, заменить своим после загрузки. Текст виден мгновенно, но будет «прыжок» при подмене.
• block — на короткое время (около 3 секунд) скрыть текст, потом показать своим шрифтом. Прыжка нет, но есть риск пустоты.
• optional — дать браузеру решать: если шрифт не успел загрузиться быстро, вообще не применять его в этой сессии. Хорош для скорости, плох для предсказуемости внешнего вида.

Для большинства сайтов swap — разумный выбор по умолчанию.

Шаг 3. Примените шрифт в стилях

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

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

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

Шаг 4. Подскажите браузеру грузить шрифт раньше

По умолчанию браузер узнаёт о шрифте только когда дошёл до применения CSS к тексту — это поздно. Тег preload в <head> заставляет начать скачивание сразу.

<link rel="preload" href="/fonts/inter-regular.woff2"
      as="font" type="font/woff2" crossorigin>

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

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

Проверка: в DevTools на вкладке Network отфильтруйте по Font. Файл, указанный в preload, должен начать грузиться в первых строках, а не в конце очереди.

Сравнение подходов: где хранить шрифт

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

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

• Шрифт не применяется, в консоли Network — 404 на файле. Неправильный путь в url(). Путь считается относительно расположения CSS-файла, а не HTML-страницы. Проще указывать абсолютный путь от корня: /fonts/....
• Жирный текст выглядит как обычный. Вы дали bold-файлу отдельный font-family или забыли описать второй @font-face с font-weight: 700. Начертания одного семейства должны делить одно имя.
• Шрифт грузится дважды (видно в Network два запроса одного файла). В теге preload нет атрибута crossorigin. Добавьте его.
• Текст мигает: сначала системный, потом резко меняется. Это работа font-display: swap. Полностью убрать эффект нельзя, но уменьшить прыжок помогает подбор запасного шрифта с близкими метриками — тема отдельная, здесь только упоминаем.
• В консоли предупреждение The resource was preloaded but not used. Вы предзагрузили файл, который на странице не применяется, либо имя font-family в preload и в CSS не совпадают по факту использования. Уберите лишний preload.

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

Когда базовое подключение работает, посмотрите в сторону трёх вещей. Первое — сокращение веса: если сайт русскоязычный, а шрифт содержит десятки языков, инструмент subset (например, через fonttools) уберёт лишние символы и уменьшит файл в разы. Второе — настройка HTTP-кеша: шрифты меняются редко, им можно поставить долгий срок кеширования на сервере, чтобы повторные визиты не грузили файл заново. Третье — измерьте эффект: откройте вкладку Lighthouse в DevTools и посмотрите на метрику LCP (Largest Contentful Paint) до и после preload. Если заголовок на первом экране набран вашим шрифтом, разница будет заметна.