Сократите объём работы со шрифтами, который требует каждое маршрутное представление
Проведите инвентаризацию запросов шрифтов при холодном кэше на главной странице, страницах конверсии, представлениях для вошедших пользователей и шаблонах с разными системами дизайна. Запишите семейство, вес, стиль, файл, источник, объём передачи и селектор. Объявление @font-face само по себе не вызывает загрузку; браузер обычно запрашивает файл, когда текущая раскладка его использует. Поэтому неиспользуемые глобальные веса и стили стоит удалять в первую очередь.
Используйте кастомный шрифт там, где он реально несёт ценность бренда, часто в дисплейных заголовках, а для обычного основного текста, когда дизайн это позволяет, рассмотрите стек системных шрифтов. Не принимайте за данность, что переменный (variable) шрифт всегда меньше: он может заменить несколько статических файлов, но при этом быть больше одного статического начертания. Сравнивайте сжатые ресурсы, которые реально запрашивает маршрут.
Удалите семейства, веса, курсивы и иконковые шрифты, которые не используются на проверенных маршрутах.
Проверьте, позволяет ли лицензия веб‑доставку, субсеттинг и self‑hosting перед изменением сборки.
Используйте WOFF2 и субсеттинг, не убирая нужные символы
Начинайте с WOFF2 как базиса для современных браузеров. WOFF2 — пакет веб‑шрифта с улучшенной компрессией и быстрой декомпрессией, реализованный в основных браузерах. Оставляйте другие форматы лишь для документированных требований устаревших браузеров; в противном случае корректно подобранный запасной шрифт безопаснее для совместимости.
Субсеттинг создаёт меньший файл, содержащий выбранные глифы. unicode-range позволяет ассоциировать поднаборы с диапазонами символов, чтобы браузер выбирал релевантный файл при сопоставлении текста. Собирайте поднаборы из реальных страниц и поддерживаемых языков, включая пунктуацию, валюты, имена, юридические тексты и вводимые пользователями скрипты. Отсутствующие глифы — это проблема корректности, а не допустимая экономия байтов.
Тестируйте представительные локализованные страницы и ввод в формах, а не только англоязычные образцы дизайна.
Убедитесь, что unicode-range и диапазон веса/стиля каждого поднабора соответствуют развёрнутому файлу.
Проектируйте запасной шрифт и политику font-display вместе
Запасной шрифт — это то, что видят пользователи, когда кастомное начертание ещё не готово. Выбирайте его по близким пропорциям, затем сопоставьте реальные заголовки, многострочные кнопки, навигацию, таблицы, формы и длинные локализованные строки. Различия в ширине меняют переносы; отличия в ascent, descent или line‑gap меняют высоту блока. Оба фактора могут сдвинуть уже видимое на странице содержимое.
font-display определяет поведение рендеринга, пока начертание недоступно. optional даёт крайне короткий период блокировки и не предусматривает swap‑периода, поэтому подходит для body‑текста, когда стабильный запасной шрифт важнее на первом визите. swap быстро показывает запасной шрифт и позже может применить веб‑шрифт, но используйте его только там, где поздняя подмена не вызовет разрушительной перестройки. Block или fallback должны служить проверенной дизайнерской цели, а не быть глобальным дефолтом. CSS size-adjust может помочь настроить метрики запаса, но визуально проверьте каждую поддерживаемую систему письма и окно просмотра.
Не делайте текст для оплат, восстановления доступа, аккаунта, безопасности или навигации зависимым от позднего кастомного шрифта.
Запасная буква может исказить смысл; SVG‑иконки обычно безопаснее для интерфейсных символов.
Улучшайте обнаружение, но ограничивайте preload и анализируйте поток данных
Объявление начертания только во внешнем CSS может быть обнаружено после загрузки и парсинга этого файла. Поддерживаемый критический CSS может объявление открыть раньше; не инлайните бинарник шрифта — это увеличит документ. Для стороннего происхождения preconnect может установить соединение раньше. Запросы шрифтов — это CORS‑ресурсы, поэтому кросс‑origin доставка и предзагрузки требуют корректного crossorigin‑обработки.
Preload — это приоритетное переопределение, а не универсальный переключатель скорости. Он может конкурировать с другой критической работой и скачать шрифт, который маршрут никогда не использует; он также обходит выбор unicode‑range. Исправьте позднее обнаружение сначала, затем preload не более одного проверенного файла для первого просмотра, используя точный URL, as=font и crossorigin. Google Fonts указывает, что API‑запросы включают IP посетителя, запрошенный URL, HTTP‑заголовки и referer; он также заявляет, что API не устанавливает и не логирует cookies и не использует собранную информацию для профилей или таргетированной рекламы. Self‑hosting прекращает передачу этих данных Google для таких загрузок. Оценивайте доставку, уведомление о приватности, юрисдикцию, контракты и привлекайте квалифицированные консультации, где нужно.
Сравните трассы холодного кэша и подтвердите, что предзагруженный файл потребляется на маршруте.
Взвесьте установку соединения, возможности кэша и CDN, сопровождение активов и поток данных посетителей.
Версионируйте шрифтовые активы и храните проверенную конфигурацию CSS‑fallback.
Тестируйте поведение рендера и рассматривайте шрифты как зависимость устойчивости
При холодном кэше используйте сетевые инструменты браузера, чтобы проверить цепочку от CSS до запроса шрифта, тайминги, источник, кэширование и отказы. Повторите на ограниченном соединении, затем замедлите или заблокируйте шрифт. Успех — это читаемый текст, работоспособные элементы управления, корректные символы и согласованная раскладка до появления кастомного начертания. Тестируйте реалистичные узкие и десктопные макеты, длинные строки, ошибки, тексты согласия, цены и каждый поддерживаемый скрипт.
В Chromium запишите перезагрузку в Performance‑панели и проинспектируйте дорожку Layout Shifts; DevTools может идентифицировать перемещённые элементы и анимировать сдвиг. Загрузка шрифтов — известный виновник, но перемещённый элемент не обязательно является корневой причиной, поэтому сопоставьте трассу с применением шрифта. Layout Instability API доступен только в Chromium, что делает важными визуальные проверки в разных браузерах. Включите в проверку шрифтовые активы, CORS‑поведение, политику кэширования, запасы и путь отката в ревью релиза. Намеренный режим деградации — это читаемый текст, а не пустой контент или сломанная навигация.
Тёплый кэш может скрыть начальный запрос и проблему рендеринга.
Повторяйте проверку при изменениях файлов, CMS‑копирайта, шаблонов, провайдеров или настроек CDN.