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

Почему шрифты важны для скорости и SEO

Шрифты — это не только про визуальную часть. Они напрямую влияют на технические метрики, которые Google использует в ранжировании. С 2021 года Core Web Vitals стали официальным фактором ранжирования, и гарнитуры участвуют почти в каждой из этих метрик.

Как именно шрифты бьют по показателям:

  • FCP (First Contentful Paint) — пока кастомный шрифт не загрузился, текст просто не отображается, и первый содержательный рендеринг откладывается.
  • LCP (Largest Contentful Paint) — если крупный заголовок или блок набран нестандартным шрифтом, браузер ждёт файл, прежде чем нарисовать элемент. LCP уходит за пределы нормы 2,5 секунды.
  • CLS (Cumulative Layout Shift) — системный и кастомный шрифт имеют разную высоту и ширину букв. Когда гарнитура подгружается, текст «перепрыгивает», а всё, что ниже, сдвигается. Норма CLS — до 0,1; выше 0,25 это уже критично.
  • Interaction to Next Paint (INP) — перегруженная страница тратит ресурсы на рендеринг шрифтов, поэтому отклик на клик замедляется, особенно на слабых смартфонах.

Важный нюанс: шрифты влияют на SEO не напрямую, а опосредованно — через скорость, стабильность и доступность контента. Медленная страница = высокие отказы = снижение позиций. При асинхронном подключении без fallback-шрифта бот может вообще не увидеть текст до загрузки файла, что критично для заголовков и ключевых блоков. То есть оптимизируя шрифты, вы по факту оптимизируете SEO.

Как найти проблемные шрифты: FOIT, FOUC и инспекторы

Прежде чем ускорять, нужно понять, какие гарнитуры вообще используются и где узкие места. На современных сайтах шрифты идут из CSS, через Google Fonts, Adobe Fonts или хостятся на своём сервере — всё это надо выявить.

FOIT и FOUC — два лица одной проблемы

  • FOIT (Flash of Invisible Text) — браузер блокирует отображение текста, пока не загрузится шрифт. Пользователь видит пустое место вместо строк.
  • FOUC (Flash of Unstyled Content) — текст сначала показывается системным шрифтом, а потом резко «перескакивает» на кастомный. Видно, как слова меняют размер и вес.

Оба эффекта — сигнал, что шрифты подключены без font-display или с неправильным значением.

Способ 1: DevTools → вкладка Network (Fonts)

Откройте инспектор (F12), перейдите в Network и отфильтруйте по Fonts. Вы увидите все файлы гарнитур: расширения (.woff2, .woff, .ttf, .otf, .eot), размер каждого, время загрузки и источник. Если в списке лежат файлы по 300–500 КБ или шрифты тянутся с внешних доменов — это зона риска.

Способ 2: Поиск @font-face в CSS

Объявление @font-face подключает кастомный шрифт. Найдите все такие блоки в CSS и проверьте параметры src: если пути ведут на Google Fonts или Adobe Fonts, добавьтесь DNS-запросы и таймауты внешних серверов. Подробнее про render-blocking ресурсы и как правильно выстраивать загрузку через HTTP/2 — в статье render-blocking-i-http2.

Способ 3: Lighthouse и Web Fonts Inspector

В Lighthouse (раздел Accessibility) есть прямое предупреждение «Text is invisible while webfonts are loading» — оно прямо указывает, что шрифты прячут текст. В Performance вы увидите, сколько секунд занимают гарнитуры. Для точного списка шрифтов удобно использовать расширение Web Fonts Inspector — оно показывает все активные @font-face и то, какой шрифт реально отрисовывается на странице.

Способ 4: поиск по всему сайту

Чтобы охватить не одну страницу, а весь проект, используйте бесплатную проверку seoquest.ru/check/free или регулярное выражение @font-face|woff2|ttf|otf по HTML/CSS/JS. Анализируйте: сколько уникальных гарнитур и сколько копий одного шрифта в разных форматах и весах — обычно оказывается, что половина из них лишняя.

Оптимизация шрифтов: subsetting, preload, font-display

Переходим к действиям. Конкретные шаги, которые реально ускоряют страницу.

1. Оставьте только нужные веса и символы (subsetting)

Чаще всего на сайте нужны Regular и Bold — всё остальное (Light, Black, Italic) часто просто не используется. Плюс большинство шрифтов содержат тысячи символов: кириллицу, латиницу, иероглифы, эмодзи. Ваш сайт обычно говорит только на русском и английском. Subsetting вырезает лишнее — например, Roboto с китайскими глифами весит около 450 КБ, без них ~120 КБ. Разница в разы. Инструменты: Font Squirrel Webfont Generator, подбор символов в Google Fonts, fonttools для продвинутых.

2. Используйте WOFF2 как основной формат

Формат Размер Поддержка Что делать
WOFF2 на 30–40% меньше WOFF все современные браузеры основной формат
WOFF средний хорошие охват fallback для старых версий
TTF / OTF большой есть, но не оптимизирован избегать
EOT устаревший только IE не использовать

3. Установите font-display: swap

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

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

Значение auto (по умолчанию) часто блокирует текст на 3–5 секунд — его стоит избегать. Для hero-заголовков, где важна мгновенная видимость, рассматривают font-display: optional, но swap — безопасный выбор по умолчанию.

4. Предварительно загрузите критичные шрифты

В <head> добавьте preload для важных гарнитур (заголовки, кнопки):

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

Атрибут crossorigin обязателен — без него preload не сработает. О том, почему отложенные и блокирующие запросы тормозят страницу и как это связано с кешированием через gzip, читайте в gzip-i-keshirovanie.

5. Кэшируйте шрифты на клиенте

Настройте HTTP-заголовки для файлов шрифтов: Cache-Control: max-age=31536000 плюс ETag или Last-Modified. При повторном заходе гарнитуры берутся из кэша, а не скачиваются заново — это экономит трафик и ускоряет возвратных пользователей.

6. Локальный хостинг вместо Google Fonts на лету

Google Fonts добавляет цепочку запросов: DNS → CSS → сами шрифты. Если вы всё же используете Google Fonts, хотя бы добавьте &display=swap в URL и отключите ненужные языки. Для максимального контроля лучше скачать гарнитуры, сделать subsetting и подключить локально через @font-face.

Системные vs веб-шрифты: что выбрать

Вопрос не в «плохие или хорошие» шрифты, а в балансе между узнаваемостью бренда и скоростью.

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

Системные шрифты (stacks вроде -apple-system, Segoe UI, Roboto, Helvetica Neue) грузятся мгновенно, потому что уже есть на устройстве пользователя. Они идеальны как fallback и для performance-critical проектов: лендингов, админок, инструментов.

Практический подход — гибридный: критичные элементы (заголовки, логотип) можно брать веб-шрифтом с preload и swap, а основной текст держать на системной куче или лёгком веб-шрифте. Так вы получаете и стиль, и скорость. Если в аудите по скорости загрузки сайта шрифты среди главных тормозов — начните именно с замены лишних гарнитур на системные или их оптимизации.

Как проверить шрифты в seoquest.ru (бесплатно)

Список @font-face по всему сайту проверка seoquest.ru не строит. В балле скорости есть скрипты, которые мешают отрисовке, время ответа и сжатие. Шрифт, который блокирует первый экран, иногда попадает туда как такой ресурс, но отчёта «вот эти гарнитуры» не будет. FCP, LCP и CLS смотрите в PageSpeed Insights, файлы шрифтов — во вкладке Network.

Что сделать после проверки:

  1. На главной открыть DevTools → Network и отфильтровать Font.
  2. Выписать дубли и лишние начертания.
  3. Оставить WOFF2, font-display: swap и preload только для того шрифта, который виден сразу.
  4. Сверить LCP и CLS в PageSpeed Insights, а в seoquest.ru — не просел ли балл скорости из-за тяжёлой главной.

Такой цикл «измерил — оптимизировал — проверил» даёт измеримый результат без гадания на кофейной гуще.

Часто задаваемые вопросы

Влияют ли шрифты на SEO?

Косвенно, но сильно. Через скорость загрузки, стабильность макета (CLS) и доступность текста для ботов. Плохо оптимизированные шрифты снижают Core Web Vitals и, как следствие, позиции в поиске.

В чём разница между FOIT и FOUC?

FOIT — текст не виден, пока грузится шрифт (браузер его блокирует). FOUC — текст сначала показывается системным шрифтом, а потом резко меняется на кастомный. Оба эффекта лечатся через font-display: swap.

WOFF2 или TTF — что использовать?

WOFF2. Он на 30–40% меньше по размеру, быстрее распаковывается и лучше поддерживается современными браузерами. TTF и OTF стоит избегать, EOT устарел совсем.

Зачем нужен preload шрифтов и crossorigin?

preload говорит браузеру начать загрузку критичного шрифта как можно раньше, не дожидаясь парсинга CSS. Атрибут crossorigin обязателен — без него браузер отклонит предзагрузку из-за политик безопасности.

Стоит ли отказываться от Google Fonts?

Полностью отказываться не обязательно. Но лучше скачать шрифты, сделать subsetting и подключить локально с font-display: swap, либо хотя бы передать &display=swap и обрезать ненужные языки в URL.