Дизайнер выбрал красивую гарнитуру, верстальщик подключил восемь начертаний в трёх форматах со стороннего сервиса — и вот на открытии страницы текст на секунду пропадает, а потом заголовки скачут, ломая вёрстку. Скорость проседает, а в отчёте Core Web Vitals загораются красные CLS и LCP. Шрифты — один из самых недооценённых источников тормозов: их легко подключить неправильно и так же легко подключить хорошо.
В этой статье разберём, как подключать веб-шрифты на сайте 1С-Битрикс, чтобы они не мешали рендерингу: почему возникает пустой или скачущий текст, зачем нужен формат woff2 и font-display, что даёт self-hosting и preload, как урезать вес через подмножества символов. Тема — часть общей работы над скоростью, которую мы ведём в связке с аудитом и оптимизацией проекта.
Коротко
- Используйте один формат woff2 на начертание — он лучше всех сжат и поддерживается везде.
- Ставьте font-display: swap, чтобы текст не пропадал, пока грузится шрифт.
- Храните шрифты на своём сервере (self-hosting) и делайте preload одного-двух критичных начертаний.
- Режьте вес подмножествами символов и оставляйте только реально используемые начертания.
Почему шрифты тормозят рендеринг
Веб-шрифт — это файл, который браузер обязан скачать, прежде чем отрисовать текст выбранной гарнитурой. В отличие от системных шрифтов, доступных мгновенно, кастомный шрифт добавляет в критический путь загрузки новый ресурс: сетевой запрос, ожидание, разбор файла. Пока всё это происходит, текст либо не виден, либо показан не тем шрифтом.
Проблема усугубляется типичными ошибками: подключают лишние начертания, тянут устаревшие форматы, грузят шрифты со стороннего домена с дополнительным DNS-запросом и соединением, не управляют поведением при загрузке. Каждый из этих факторов растягивает момент, когда пользователь видит нормальный текст, — а это ключевой момент восприятия скорости сайта.
FOIT и FOUT: что видит пользователь
Пока шрифт грузится, браузер должен что-то показать, и есть два сценария — оба некрасивы, если ими не управлять.
- FOIT (Flash of Invisible Text). Браузер прячет текст до загрузки шрифта — пользователь видит пустое место вместо контента.
- FOUT (Flash of Unstyled Text). Браузер сразу показывает системный шрифт, а потом резко меняет его на веб-шрифт. Текст виден сразу, но при замене вёрстка может скакнуть.
Цель правильного подключения — избежать пустого экрана (FOIT) и минимизировать скачок при замене (часть FOUT). Достигается это связкой font-display, подбором похожего запасного шрифта и preload критичных начертаний. Полностью «бесшовной» замены добиться сложно, но заметность проблемы можно свести почти к нулю.
Формат woff2 и лишние файлы
Долгое время в проекты тянули «пакет на все случаи»: woff2, woff, ttf, eot, svg — по пять файлов на каждое начертание. Сегодня это анахронизм. Все актуальные браузеры понимают woff2 — самый сжатый формат, поэтому в большинстве проектов достаточно одного woff2 на начертание.
| Формат | Статус | Нужен ли сейчас |
|---|---|---|
| woff2 | Лучшее сжатие, поддержка везде | Да, основной |
| woff | Старее, крупнее | Редко, для очень старых браузеров |
| ttf/otf | Не сжат, тяжёлый | Нет для web |
| eot/svg | Устаревшие | Нет |
Отказ от лишних форматов уменьшает и вес, и число запросов, и путаницу в @font-face. Для современного магазина на 1С-Битрикс чистый woff2 — разумный выбор по умолчанию.
font-display: управляем отрисовкой
Свойство font-display в правиле @font-face определяет, что браузер делает, пока шрифт грузится. Ключевые значения:
- swap. Сразу показать системный шрифт, заменить на веб-шрифт после загрузки. Убирает FOIT, текст виден мгновенно.
- optional. Если шрифт не успел за короткий срок — оставить системный. Минимум скачков, ценой того, что веб-шрифт иногда не применится.
- fallback. Компромисс между swap и optional: короткий период невидимости, затем системный, потом замена.
Для большинства сайтов swap — безопасный выбор: пользователь всегда видит текст. Скачок при замене снижают, подбирая запасной системный шрифт с близкими метриками, чтобы строки не «переезжали». Это напрямую влияет на CLS.
Self-hosting против внешних сервисов
Шрифты можно грузить со стороннего сервиса или хранить у себя (self-hosting). Для скорости и стабильности почти всегда выигрывает второй вариант.
Внешний источник добавляет отдельное DNS-разрешение, новое TCP/TLS-соединение и зависимость от чужого сервера. Self-hosting всего этого лишён: файлы отдаются с вашего домена, по уже установленному соединению, с вашими настройками кэширования. Это ускоряет загрузку и убирает зависимость от доступности стороннего сервиса. На сайте 1С-Битрикс шрифты кладут в шаблон и отдают со своего домена, что хорошо ложится на композитный кэш и отдачу статики. Про инфраструктуру и отдачу статики полезно почитать нашу статью про хостинг и инфраструктуру BitrixVM.
preload критичных шрифтов
Обычно браузер узнаёт о шрифте, только дойдя до CSS и встретив @font-face, — это задержка. Подсказка <link rel="preload"> заставляет браузер начать загрузку шрифта раньше, параллельно с разбором страницы. Для шрифта, которым набран текст первого экрана, это ускоряет появление нормального текста.
Preload особенно уместен для гарнитуры заголовка, который часто и есть LCP-элемент страницы. Ускорив его загрузку, вы улучшаете и восприятие скорости, и метрику.
Подмножества символов (subsetting)
Полный файл шрифта содержит тысячи глифов: латиницу, кириллицу, диакритику, спецсимволы разных языков. Реальному российскому магазину нужна лишь малая часть. Subsetting — это создание подмножества файла только с нужными символами.
- Оставить нужные алфавиты. Обычно кириллица и базовая латиница; экзотику убирают.
- Урезать спецглифы. Редкие символы, которых нет в текстах сайта, не тянут в файл.
- Разбить по диапазонам. Через
unicode-rangeможно грузить кириллицу и латиницу отдельными подмножествами.
Subsetting заметно уменьшает вес каждого файла без визуальных потерь, потому что удаляются символы, которые всё равно не отображаются. Для многошрифтового дизайна экономия суммируется в ощутимые килобайты на каждой загрузке.
Сколько начертаний реально нужно
Самый частый перерасход — лишние начертания. В проект тянут regular, light, medium, semibold, bold, black да ещё курсивы каждого, а на деле в вёрстке используются три. Каждое начертание — отдельный файл и запрос.
- Соберите используемые начертания. Пройдитесь по стилям и найдите реально применяемые значения font-weight и font-style.
- Сопоставьте с подключёнными. Часто половина
@font-faceне используется нигде. - Схлопните близкие. Промежуточные насыщенности нередко можно заменить имеющимися без потерь.
- Оставьте минимум. Практичный набор — regular, medium и bold одной-двух гарнитур.
Такой аудит почти всегда выкидывает несколько файлов и запросов без визуальных изменений — быстрая победа для скорости.
Шрифты и Core Web Vitals
Шрифты влияют сразу на несколько метрик Core Web Vitals, поэтому это не «косметика», а часть производительности.
- LCP. Если крупный текст — ключевой элемент экрана, медленный шрифт отодвигает его отрисовку и ухудшает LCP.
- CLS. Замена системного шрифта на веб-шрифт с другими метриками двигает вёрстку — растёт CLS.
- Восприятие скорости. Пустой или скачущий текст ощущается как «сайт тормозит», даже если цифры не катастрофичны.
Связка woff2 + font-display + preload критичного + подбор fallback минимизирует все три эффекта. Шрифты — один из первых пунктов, который мы проверяем при работе над скоростью сайта, наряду с кэшем и запросами к базе; про эффективную работу с данными есть материал про D7 ORM в Битрикс.
Подключение в 1С-Битрикс
На практике подключение шрифтов в 1С-Битрикс сводится к работе с шаблоном сайта:
- Положите woff2 в шаблон. Файлы шрифтов хранятся рядом с шаблоном и отдаются с вашего домена.
- Опишите @font-face. В CSS шаблона с указанием формата woff2 и font-display: swap.
- Добавьте preload. В шапке шаблона — link rel="preload" на одно-два критичных начертания.
- Проверьте кэш. Убедитесь, что статика шрифтов кэшируется браузером и корректно отдаётся при композитном кэше.
- Задайте fallback. В font-family пропишите системный запасной шрифт с близкими метриками.
Поскольку правки шрифтов затрагивают шаблон, выкатывать их лучше через предсказуемый процесс, а не «руками на бою». Как выстроить такую выкладку, мы разбираем в статье про CI/CD и деплой в Битрикс, а вопросы безопасной отдачи ресурсов затрагиваем в материале про REST, вебхуки и безопасность.
Частые ошибки
- Пять форматов на начертание. woff, ttf, eot, svg тянутся зря — хватает одного woff2.
- Нет font-display. Текст пропадает (FOIT), пользователь видит пустоту.
- Шрифты со стороннего домена. Лишний DNS, соединение и зависимость от чужого сервиса.
- preload на всё подряд. Начертания конкурируют за канал и мешают друг другу.
- Восемь начертаний, три в деле. Лишние файлы и запросы без визуального смысла.
- Полный набор символов. Без subsetting в файле тысячи ненужных глифов.
- Нет подходящего fallback. При замене шрифта вёрстка скачет — растёт CLS.
Чек-лист внедрения
- Только woff2. Один формат на начертание, устаревшие форматы убраны.
- font-display настроен. swap (или обоснованный optional/fallback) на всех шрифтах.
- Self-hosting. Файлы отдаются со своего домена, без стороннего сервиса.
- preload критичного. Одно-два начертания первого экрана предзагружаются.
- Subsetting выполнен. В файлах только нужные символы (кириллица, латиница).
- Минимум начертаний. Оставлены реально используемые, лишние удалены.
- Fallback подобран. Системный запасной шрифт с близкими метриками против скачка вёрстки.
- Кэш проверен. Статика шрифтов кэшируется и работает с композитным кэшем.
Вывод
Шрифты кажутся мелочью, но именно они часто отвечают за «сайт медленно открывается» и красные метрики. Хорошая новость в том, что грамотное подключение — это несколько понятных шагов: один формат woff2, font-display вместо пустого экрана, self-hosting вместо стороннего сервиса, точечный preload критичного и урезание веса через subsetting и минимум начертаний.
На сайте 1С-Битрикс всё это делается в шаблоне и хорошо сочетается с композитным кэшем и отдачей статики. Отнеситесь к шрифтам как к части производительности, а не только эстетики: они влияют на LCP, CLS и общее восприятие скорости. Наведите в них порядок — и получите более быстрый сайт без единого визуального компромисса.
