Веб-шрифты замедляют сайт двумя способами: браузер либо прячет текст, пока файл шрифта не скачается (посетитель смотрит на пустые блоки), либо показывает текст запасным шрифтом и потом перерисовывает - макет дёргается. Плюс сами файлы: подключить «всю семью» из восьми начертаний - это лишние 500-800 КБ. Быстрое подключение шрифтов - это формат WOFF2, максимум 3-4 начертания, предзагрузка ключевого файла, font-display: swap и локальное хранение вместо внешних сервисов.

Как проверить свой сайт. F12, вкладка Network, фильтр Font, обновите страницу. Смотрите на три вещи: сколько файлов грузится (больше четырёх - перебор), какой формат (должен быть WOFF2) и откуда (свой домен быстрее и надёжнее внешнего сервиса). Суммарный вес шрифтов - в идеале до 150-200 КБ.

Почему шрифты - особенный тормоз

Шрифт нужен браузеру рано: без него нельзя окончательно отрисовать текст, то есть почти всю страницу. При этом файл шрифта обнаруживается поздно - браузер сначала скачивает и разбирает CSS и только потом узнаёт, что нужен ещё и шрифт. Получается цепочка: HTML, потом CSS, потом шрифт - и каждый этап ждёт предыдущий.

Отсюда два видимых симптома. FOIT (flash of invisible text) - текст невидим до загрузки шрифта. FOUT (flash of unstyled text) - текст мигает, перерисовываясь из запасного шрифта в фирменный. Второй вариант ещё и сдвигает макет, ухудшая CLS - подробно про эту метрику мы писали в статье как исправить CLS.

Как подключить шрифты быстро: 6 правил

  1. Только WOFF2Современный формат со сжатием на 30 процентов лучше WOFF. Форматы TTF, OTF и EOT на сайте в 2026 году - признак, что до шрифтов не доходили руки.
  2. Сократите начертанияОбычный, полужирный, может быть курсив - этого хватает почти всем сайтам. Каждое лишнее начертание - ещё один файл на 30-80 КБ.
  3. СубсеттингВыбросьте из файла ненужные алфавиты: полный шрифт с греческим, вьетнамским и иероглифами весит в разы больше, чем кириллица плюс латиница.
  4. Предзагрузка главного шрифтаТег link rel="preload" as="font" в шапке говорит браузеру качать шрифт сразу, не дожидаясь разбора CSS - цепочка ожиданий рвётся.
  5. font-display: swapТекст показывается сразу запасным шрифтом и заменяется фирменным по готовности. Посетитель читает контент с первой секунды.
  6. Подберите запасной шрифтЧерез size-adjust и ascent-override запасной шрифт подгоняется по ширине под фирменный - перерисовка происходит без скачка макета.
Важно про внешние сервисы шрифтов. Подключение с чужого CDN - это лишнее DNS-соединение, зависимость от внешнего сервера и нестабильная скорость. Надёжнее скачать файлы и отдавать со своего домена: быстрее, стабильнее, и сайт не «моргает» при проблемах у стороннего сервиса.

Наведём порядок в шрифтах за один визит

Переведём подключение на WOFF2 с своего домена, уберём лишние начертания, настроим preload и swap. Текст перестанет прыгать, страница станет легче на сотни килобайт.

Оптимизировать шрифты

Сколько начертаний действительно нужно сайту

Тип сайтаДостаточноТипичный перебор
Корпоративный сайтRegular + Bold6-8 начертаний «на всякий случай»
Интернет-магазинRegular + Medium + BoldДва разных семейства для цен и текста
Медиа, блогRegular + Bold + ItalicОтдельный декоративный шрифт для цитат

Если дизайн требует больше - это разговор с дизайнером о цене каждого начертания в килобайтах и миллисекундах. Часто «медиум» от «регуляра» на экране отличает только дизайнер, а платят за него все посетители. Компромисс, который устраивает всех: редкие начертания заменяются синтетическими - браузер сам утолщает или наклоняет базовый шрифт, и отдельный файл не нужен. Общий план разгона сайта, где шрифты - один из пунктов, есть в статье как ускорить сайт.

Совет. Системные шрифты - легальный чит-код: связка из font-family с системными шрифтами устройства весит ноль байт и выглядит уместно на любой платформе. Для интерфейсных элементов, форм и служебного текста это отличный выбор - фирменный шрифт оставьте заголовкам.

Как проверить результат после оптимизации шрифтов

Проверка делается по трём точкам. Первая - вкладка Network с фильтром Font: файлов стало 2-4, формат WOFF2, домен свой, суммарный вес упал. Вторая - визуальный тест на медленной сети: включите в DevTools троттлинг Slow 4G и обновите страницу - текст должен появиться сразу, а замена шрифта пройти без заметного скачка строк. Третья - PageSpeed Insights: пункты про блокирующие ресурсы и сдвиги макета, связанные со шрифтами, должны уйти из списка рекомендаций.

Заодно проверьте кэширование шрифтовых файлов: им положен долгий срок жизни в заголовках Cache-Control, ведь меняются они раз в несколько лет. Тогда постоянные посетители скачают шрифты один раз, а дальше будут получать их мгновенно из кэша браузера при каждом визите.

Частые вопросы про шрифты и скорость

Насколько реально шрифты замедляют сайт?
Типовая картина «до»: 6 файлов TTF с внешнего сервиса, 600 КБ, текст появляется через 2-3 секунды. После оптимизации: 3 файла WOFF2 со своего домена, 120 КБ, текст виден сразу. На мобильной сети разница ощущается как «сайт стал другим».
Что лучше: variable-шрифт или несколько обычных файлов?
Вариативный шрифт содержит все начертания в одном файле и выгоден, когда их нужно много: один файл на 100-150 КБ вместо пяти по 50. Если начертаний два-три, обычные WOFF2-файлы обычно легче. Решается взвешиванием конкретных файлов.
Текст на сайте мигает при загрузке - это лечится?
Да. Мигание - это замена запасного шрифта фирменным. Полностью убрать его нельзя (либо мигание, либо невидимый текст), но можно сделать незаметным: подогнать запасной шрифт по метрикам через size-adjust, и перерисовка пройдёт без сдвига букв и строк.
Сколько стоит оптимизация шрифтов?
Это компактная работа на 2-4 часа: конвертация в WOFF2, субсеттинг, preload, правки CSS - ориентировочно 100-200 BYN. Обычно делаем её в составе общего пакета по скорости, где эффект складывается со сжатием картинок и кэшированием.

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