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

Вы вставили красивый шрифт с Google Fonts, а Lighthouse снизил оценку и жалуется на «Ensure text remains visible during webfont load». При медленном соединении текст на странице пропадает на секунду-две, а потом дёргается — это называется FOIT и FOUT¹. Ниже — рабочий способ подключить шрифты за 10–15 минут так, чтобы браузер показывал текст сразу и не грузил лишние килобайты.

Инструкция для владельца сайта или верстальщика, который подключает шрифты вручную в HTML и CSS. Актуально для всех современных браузеров (2024–2025). Про сборщики (Webpack, Vite) и плагины CMS в конце — одной строкой.

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

• Файлы шрифта в формате WOFF2. Это единственный формат, который стоит подключать в 2025 году: его понимают все актуальные браузеры, а весит он меньше WOFF и TTF. Если у вас только TTF или OTF — сконвертируйте, об этом ниже.
• Доступ к HTML-шаблону (файлу, где находится <head>) и к CSS-файлу.
• Знание, какие именно начертания вам реально нужны: обычный (400), полужирный (700), курсив. Каждое лишнее начертание — это отдельный файл на 15–40 КБ.

Как получить WOFF2, если у вас TTF

Загрузите TTF в конвертер transfonter.org или используйте утилиту fonttools. Команда для конвертации одного файла (Python, пакет fonttools версии 4.x):

pip install fonttools brotli

# конвертация TTF в WOFF2
fonttools ttLib.woff2 compress Inter-Regular.ttf

После команды рядом появится файл Inter-Regular.woff2. Пакет brotli обязателен — без него команда упадёт с ошибкой про отсутствующий модуль сжатия.

Шаг за шагом: подключаем локальный шрифт

1. Положите файлы в папку. Например, /fonts/ в корне сайта. Пусть там лежат Inter-Regular.woff2 и Inter-Bold.woff2 — только те начертания, что нужны.

2. Опишите шрифт в CSS через @font-face. Обратите внимание на font-display: 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;
     font-style: normal;
     font-display: swap;
   }

   Проверка: сохраните CSS, обновите страницу с очисткой кеша (Ctrl+Shift+R). Текст должен появиться сразу системным шрифтом, а через миг перерисоваться в Inter.

3. Примените шрифт. В основном стиле укажите семейство и обязательно резервный системный шрифт:

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

   Резервный шрифт нужен, чтобы браузеру было чем показать текст, пока грузится Inter. Без него при swap текст покажется дефолтным Times New Roman — некрасиво.

4. Подскажите браузеру загрузить шрифт заранее. В <head>, выше подключения CSS, добавьте предзагрузку для того начертания, что видно в первом экране:

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

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

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

Предзагружайте только шрифт первого экрана. Если поставить preload на все шесть начертаний, браузер начнёт качать их наперегонки с картинками и CSS — и страница откроется медленнее, чем совсем без предзагрузки.

Частые ошибки новичков

Ошибка 1. Подключение через Google Fonts тегом link

Стандартный сниппет <link href="https://fonts.googleapis.com/..."> добавляет отдельное соединение с чужим доменом и цепочку из двух запросов: сначала CSS с описанием, потом сами файлы. На медленном 3G это 400–700 мс до появления текста. Решение — скачать шрифты и разместить их локально, как выше. Бонус: не отдаёте данные посетителей на серверы Google, что важно для соблюдения приватности в РФ и ЕС.

Ошибка 2. Подключение TTF и OTF вместо WOFF2

TTF-файл шрифта Inter Regular весит около 300 КБ, WOFF2 того же начертания — около 100 КБ. Разница на каждом начертании — сотни килобайт. Подключать TTF в 2025 году нет причин: WOFF2 поддерживают все браузеры, которыми реально пользуются.

Ошибка 3. Забыли font-display

По умолчанию браузер применяет режим block: до трёх секунд текст просто не показывается (тот самый FOIT). Пользователь видит пустую страницу с картинками. font-display: swap заставляет показать текст резервным шрифтом сразу.

Ошибка 4. Подключили все начертания «на всякий случай»

Загрузка Regular, Medium, SemiBold, Bold и их курсивов — это 6–10 файлов и 600 КБ шрифтов, из которых на странице реально используются два. Подключайте только то, что видно в вёрстке.

Ошибка 5. Кириллица тянет весь Unicode

Если шрифт содержит латиницу, кириллицу, греческий и символы — а вам нужна только кириллица с латиницей, — файл раздут в разы. Обрежьте лишние диапазоны через subset в transfonter.org или укажите unicode-range в @font-face, чтобы браузер грузил файл только при наличии нужных символов.

Сравнение способов подключения

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

• «Failed to decode downloaded font» в консоли. Файл битый или это не WOFF2 (например, TTF переименовали в .woff2). Проверьте, что конвертация прошла реально, а не сменой расширения.
• Шрифт грузится дважды в Network. Забыли crossorigin в теге preload — добавьте его.
• Текст так и мигает пустотой. Проверьте, что font-display: swap стоит в каждом @font-face, а не только в одном.
• 404 на файл шрифта. Путь в url() указан относительно CSS-файла, а не корня. Проверьте реальный путь во вкладке Network — там видно, куда браузер стучится.
• Начертание не применяется. font-weight в @font-face не совпадает с тем, что вы задаёте в стилях. Bold-файл описан как 700 — значит и в CSS должно быть font-weight: 700.

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

После подключения прогоните страницу через PageSpeed Insights и посмотрите метрику CLS (сдвиг макета): если при смене резервного шрифта на основной текст «прыгает», настройте size-adjust и ascent-override в @font-face — это выравнивает метрики резервного и основного шрифта. Если сайт на WordPress — плагины вроде OMGF умеют скачивать Google Fonts локально автоматически; на Bitrix и Tilda подключение локальных шрифтов делается через настройки темы или кастомный CSS. Подбор шрифтовых пар и типографика — отдельная тема, здесь мы разбирали только скорость загрузки.