Веб-шрифты всё ещё самый простой выигрыш в производительности на большинстве сайтов

Паттерн, который постоянно повторяется

Если сегодня провести аудит десяти случайных production-сайтов, на большинстве из них картина со шрифтами будет примерно одинаковой:

• Шесть-десять файлов шрифтов загружаются на главной странице
• Все они в WOFF2 (хорошо), но без стратегии font-display (плохо)
• Несколько насыщенностей и стилей, которые нигде на странице не используются
• Весь стек отдаётся с домена третьей стороны (обычно Google Fonts) со всеми сопутствующими затратами на DNS, TLS и приватность
• Нет разбиения через unicode-range, поэтому каждый посетитель скачивает кириллические и греческие глифы, даже если страница на английском

Это проблема не только маленьких сайтов. Множество хорошо финансируемых маркетинговых страниц всё ещё загружают 600 KB шрифтов до того, как первый абзац можно отрисовать. Как только начинаешь замечать этот паттерн, развидеть его уже невозможно.

Исправление не экзотическое. Это небольшой набор хорошо понятных техник, которые уже годы есть в браузерах.

Используйте один variable font вместо шести статических

Если вы загружаете Inter Regular, Inter Medium, Inter SemiBold, Inter Bold и их курсивные варианты, вы скачиваете примерно в шесть раз больше байтов, чем нужно. Один variable font Inter покрывает всю ось насыщенности (а в некоторых сборках и наклон) в одном файле, который лишь немного больше двух статических начертаний.

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

Практическое правило: один файл variable font на письменность, на семейство. Латиница в одном файле, кириллица в другом, греческий в третьем, с условной загрузкой через unicode-range. Вот и всё.

Задайте разумный font-display

Поведение по умолчанию, когда пользовательский шрифт ещё загружается, — показывать ничего: невидимый текст, до трёх секунд. Это худший возможный default. Пользователи видят пустую страницу и считают, что что-то сломалось.

Добавьте это в каждое правило @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap сразу показывает fallback-шрифт и заменяет его на пользовательский, когда тот загрузится. Пользователь может читать страницу с нулевой миллисекунды. Компромисс — короткий сдвиг макета в момент замены, который смягчается следующей техникой.

Согласуйте метрики fallback-шрифта

Вспышка нестилизованного текста выглядит резкой только тогда, когда у fallback-шрифта и пользовательского шрифта сильно различаются метрики. Современный CSS исправляет это с помощью size-adjust, ascent-override и родственных свойств:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Когда метрики fallback настроены, замена почти незаметна — слова занимают то же горизонтальное пространство до и после появления пользовательского шрифта.

Работа Google над --allow-fallback-font-metrics теперь входит в базовую поддержку браузеров, а для расчётов есть инструменты — библиотека fontaine и похожие решения, которые за секунды подбирают правильные значения.

Хостите шрифты сами

Google Fonts удобен, бесплатен и приносит две реальные издержки:

1. Второй TLS handshake. Даже с HTTP/3 и connection coalescing дополнительный origin редко бывает бесплатным.
2. Вопрос приватности и соответствия требованиям. Несколько европейских судов постановили, что загрузка Google Fonts с fonts.gstatic.com означает передачу персональных данных (IP-адреса) третьей стороне. Self-hosting полностью снимает этот вопрос.

Пайплайн «скачать и захостить» такой:

1. Получите файл WOFF2 (variable build, если он существует)
2. Разбейте его на подмножества по письменностям, которые реально использует ваша аудитория
3. Отдавайте его с того же origin, что и остальной сайт, с длинным Cache-Control: max-age=31536000, immutable
4. Предзагрузите самое критичное начертание: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Это весь пайплайн. Для существующего сайта он занимает один день, и почти никогда не хочется возвращаться назад.

Когда пользовательские шрифты лучше вообще пропустить

Это стоит сказать вслух: не каждому сайту нужен пользовательский шрифт. Стек системных шрифтов теперь действительно прекрасен на каждой операционной системе:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Насыщенность правильная, метрики правильные, рендеринг настроен под устройство, а стоимость в байтах по сети ровно нулевая. Для сайта с инструментами, внутреннего приложения, портфолио с приоритетом на контент или любого продукта для пользователей в медленных сетях системный стек — правильный ответ.

<!-- tool-cta:start -->

💡 Попробуйте это: Преобразуйте свои файлы TTF или OTF в современный WOFF2 с готовым к использованию CSS с помощью Webfont Generator, что и является сменой формата, рекомендованной в публикации.

<!-- tool-cta:end -->

Честное резюме

Для типичного небольшого сайта вся история производительности веб-шрифтов укладывается в четыре шага:

1. Один variable font на семейство и письменность
2. font-display: swap с согласованными метриками fallback-шрифта
3. Self-hosted с длинными cache headers и preload для критичного начертания
4. Или полностью отказаться от шрифтов и использовать системный стек

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