Веб-шрифты: подключение и оптимизация загрузки сайта

Веб-шрифты — это файлы шрифтов, которые браузер загружает с сервера, чтобы отобразить текст на сайте в выбранной гарнитуре. В отличие от системных шрифтов, веб-шрифты дают полный контроль над типографикой, но неправильное подключение может замедлить загрузку страницы на 1-3 секунды и ухудшить метрики Core Web Vitals.

Google Fonts или самостоятельный хостинг шрифтов

Выбор между Google Fonts и собственным хостингом зависит от приоритетов: простота подключения против полного контроля над скоростью загрузки. Google Fonts предлагает огромную библиотеку из 1500+ семейств шрифтов и автоматическую оптимизацию под разные браузеры, но создаёт дополнительный DNS-запрос и зависимость от внешнего сервера.

При использовании Google Fonts браузер сначала загружает CSS-файл со шрифтами (запрос к fonts.googleapis.com), затем скачивает сами файлы шрифтов (с fonts.gstatic.com). Это два дополнительных домена, что добавляет 100-200 мс к времени загрузки из-за установки соединений. Плюс — Google автоматически отдаёт нужный формат (WOFF2 для современных браузеров, WOFF для старых), минус — вы не управляете кешированием и приоритетом загрузки.

Самостоятельный хостинг даёт полный контроль: вы храните файлы шрифтов на своём сервере или CDN, настраиваете долгое кеширование (год или больше), используете preload для критичных шрифтов и оставляете только нужные начертания. По данным HTTP Archive, сайты со своим хостингом шрифтов в среднем загружаются на 0,3-0,5 секунды быстрее, если настроено правильно. Недостаток — нужно самому конвертировать шрифты в нужные форматы и обновлять файлы при изменении дизайна.

Критерий	Google Fonts	Свой хостинг
Скорость	+100-200 мс задержка	Быстрее при правильной настройке
Настройка	1 строка кода	Конвертация, @font-face, preload
Контроль кеша	Нет	Полный
Приватность	Google видит запросы	Данные остаются у вас
Поддержка форматов	Автоматическая	Вручную

Оптимальное решение для большинства проектов — скачать нужные шрифты с Google Fonts через сервис google-webfonts-helper, разместить на своём CDN и подключить через @font-face с preload для критичных начертаний.

Оптимизация загрузки веб-шрифтов

Главная задача — загрузить шрифты так, чтобы текст появился быстро и без визуальных скачков. Стандартная ошибка — подключить 5-6 начертаний одного семейства, хотя реально используются 2-3, что добавляет 200-400 КБ лишнего веса.

Первый шаг — оставить только нужные начертания и диапазоны символов. Если на сайте только кириллица и латиница, исключите азиатские языки через параметр unicode-range в @font-face. Для русского и английского достаточно диапазонов U+0020-007F (базовая латиница), U+0400-04FF (кириллица) и U+2000-206F (пунктуация). Это сократит размер файла на 30-50%.

Используйте preload для критичных шрифтов — тех, которые нужны для отображения видимого текста. Добавьте в <head>:

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

Атрибут crossorigin обязателен, даже если шрифты на том же домене — браузер использует CORS-режим для загрузки шрифтов. Preload запускает загрузку шрифта до того, как парсер дойдёт до CSS, экономя 200-500 мс.

Ключевые правила оптимизации:

Используйте font-display: swap в @font-face — текст появится сразу в системном шрифте, потом подменится на веб-шрифт без блокировки рендеринга
Подключайте максимум 2-3 семейства шрифтов и 4-6 файлов суммарно (обычный, жирный, курсив)
Размещайте шрифты на том же домене или CDN с настроенным кешированием на год (Cache-Control: public, max-age=31536000, immutable)
Добавляйте шрифты в Service Worker для офлайн-доступа на PWA
Используйте variable fonts вместо нескольких статичных файлов — один файл с диапазоном толщин вместо 4-5 отдельных

Variable fonts (например, Inter Variable) весят 100-150 КБ и заменяют 3-4 статичных файла по 30-50 КБ, сокращая количество HTTP-запросов и упрощая управление типографикой через CSS-свойство font-variation-settings.

Форматы WOFF, WOFF2 и совместимость с браузерами

Современные браузеры поддерживают три основных формата веб-шрифтов: WOFF2, WOFF и устаревшие TTF/OTF. WOFF2 — стандарт с 2018 года, сжимает шрифты на 30% лучше WOFF за счёт алгоритма Brotli.

Один и тот же шрифт в разных форматах:

TTF — 180 КБ (без сжатия)
WOFF — 90 КБ (сжатие Zopfli)
WOFF2 — 60 КБ (Brotli, на 33% меньше WOFF)

WOFF2 поддерживают все браузеры с 2016 года: Chrome 36+, Firefox 39+, Safari 10+, Edge 14+. Доля пользователей на старых браузерах без WOFF2 — менее 2% по данным Can I Use. Для них можно добавить фоллбэк на WOFF в правиле @font-face через несколько src:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2'),
       url('/fonts/inter.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

Браузер выберет первый поддерживаемый формат. Порядок важен — WOFF2 первым, WOFF как запасной вариант. Не добавляйте TTF/OTF в современные проекты — они весят в 2-3 раза больше и нужны только для IE9-10, доля которых близка к нулю.

Для максимальной совместимости достаточно двух форматов: WOFF2 для 98% пользователей и WOFF для оставшихся. Если аналитика показывает 0% трафика со старых браузеров, можете оставить только WOFF2 и сэкономить место на сервере.

Проблемы FOUT и FOIT при загрузке шрифтов

FOUT (Flash of Unstyled Text) и FOIT (Flash of Invisible Text) — два нежелательных эффекта, которые возникают, пока браузер загружает веб-шрифт. FOUT — текст сначала показывается в системном шрифте, потом резко меняется на веб-шрифт, вызывая визуальный скачок. FOIT — текст вообще не отображается, пока шрифт не загрузится, создавая пустое пространство на 1-3 секунды.

Разные браузеры ведут себя по-разному без явных указаний: Chrome и Firefox по умолчанию скрывают текст на 3 секунды (FOIT), Safari сразу показывает текст в системном шрифте (FOUT). Решение — CSS-свойство font-display в правиле @font-face, которое контролирует поведение браузера:

font-display: block — текст скрыт до 3 секунд, потом показывается в системном шрифте (FOIT, плохо для UX)
font-display: swap — текст сразу в системном шрифте, потом подмена на веб-шрифт (рекомендуется)
font-display: fallback — скрывает текст на 100 мс, затем показывает системный шрифт, веб-шрифт применяется только если загрузился за 3 секунды
font-display: optional — браузер сам решает показывать ли веб-шрифт в зависимости от скорости соединения

Для большинства сайтов оптимален font-display: swap — текст доступен мгновенно, веб-шрифт применяется по готовности. Минус — может быть заметный скачок, если системный и веб-шрифт сильно отличаются по метрикам (высота строки, ширина символов).

Чтобы уменьшить скачок при FOUT, подберите системный шрифт-фоллбэк с похожими метриками через сервис Font style matcher или используйте новое CSS-свойство size-adjust:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%; /* подгоняет Arial под метрики Inter */
  ascent-override: 90%;
  descent-override: 22%;
}

Указывайте фоллбэк в font-family: font-family: 'Inter', 'Inter Fallback', sans-serif; — браузер применит настроенный Arial с корректировками, если Inter ещё не загрузился. Это сокращает Cumulative Layout Shift (CLS) в Core Web Vitals на 30-50%.

Альтернативный подход — предзагрузка критичных шрифтов через preload и использование Font Loading API для управления отображением через JavaScript, но для 90% сайтов достаточно font-display: swap с подобранным фоллбэком.

Инструменты для сжатия и оптимизации шрифтов

Стандартный файл шрифта содержит тысячи глифов для разных языков и символов, большинство из которых на конкретном сайте не используются. Сжатие и субсеттинг (удаление ненужных символов) сокращают размер файла в 2-5 раз без потери качества.

Основные инструменты для работы со шрифтами:

Glyphhanger — утилита командной строки (npm), анализирует HTML/CSS сайта и создаёт субсет шрифта только с реально используемыми символами. Запуск: glyphhanger --subset=font.ttf --formats=woff2 — на выходе WOFF2 с нужными глифами.
FontForge — бесплатный редактор шрифтов с GUI, позволяет вручную удалять диапазоны символов и конвертировать форматы. Подходит для разовых задач без автоматизации.
fontTools (pyftsubset) — библиотека Python от Google, мощный инструмент для субсеттинга через командную строку. Пример: pyftsubset font.ttf --output-file=font-subset.woff2 --flavor=woff2 --unicodes=U+0020-007F,U+0400-04FF
Transfonter — онлайн-сервис для конвертации шрифтов в WOFF/WOFF2 с настройкой диапазонов символов через веб-интерфейс. Генерирует готовый CSS-код с @font-face.
google-webfonts-helper — веб-сервис для скачивания шрифтов Google Fonts с выбором начертаний, форматов и кодировок без подключения к API Google.

Практический процесс оптимизации шрифта:

Определите нужные символы — для русско-английского сайта достаточно латиницы, кириллицы и базовой пунктуации (примерно 400 глифов вместо 2000+)
Используйте pyftsubset или Glyphhanger для создания субсета: pyftsubset original.ttf --unicodes=U+0020-007F,U+0400-04FF,U+2000-206F --output-file=optimized.woff2 --flavor=woff2
Проверьте размер — оптимизированный файл должен весить 30-80 КБ для обычного шрифта (против 150-300 КБ оригинала)
Протестируйте на реальных страницах — убедитесь, что все нужные символы (включая спецсимволы вроде ©, №, кавычки-ёлочки) остались

Для автоматизации в сборке проекта используйте плагины: subfont для Webpack или eleventy-plugin-fonts для Eleventy — они автоматически создают субсеты при сборке и обновляют CSS. Это гарантирует, что шрифты всегда синхронизированы с реальным содержимым сайта.

Дополнительная оптимизация — включите сжатие Brotli на сервере для WOFF2 файлов. Хотя сам WOFF2 уже сжат, HTTP-компрессия даёт ещё 5-10% экономии трафика при передаче.

Частые вопросы

Оптимально использовать 2-3 семейства шрифтов и не более 4-6 файлов суммарно. Каждый дополнительный файл добавляет 30-100 КБ трафика и один HTTP-запрос. Если нужно больше начертаний, используйте variable fonts — один файл заменяет несколько статичных.

Зависит от аудитории. WOFF2 поддерживают 98% браузеров, включая все актуальные версии Chrome, Firefox, Safari и Edge. Если аналитика показывает менее 1% трафика со старых браузеров, можно оставить только WOFF2. Для широкой аудитории добавьте WOFF как запасной вариант.

Свой хостинг даёт лучшие показатели LCP и CLS при правильной настройке. Google Fonts добавляет задержку из-за дополнительных DNS-запросов к внешним доменам. Оптимальный вариант — скачать шрифты с Google Fonts и разместить на своём CDN с preload для критичных файлов.

Используйте font-display: swap и подберите системный фоллбэк-шрифт с похожими метриками через CSS-свойства size-adjust, ascent-override и descent-override. Это сократит визуальный сдвиг при подмене шрифтов и улучшит метрику CLS в Core Web Vitals на 30-50%.

Для разовых задач используйте онлайн-сервисы Transfonter или google-webfonts-helper — они не требуют установки и дают готовый CSS-код. Для регулярной работы и автоматизации установите pyftsubset (библиотека fontTools) — это командная утилита с гибкими настройками субсеттинга.