Как веб-шрифты вызывают CLS и как уменьшить сдвиг макета

Веб-шрифты вызывают CLS, когда после загрузки заменяют резервный шрифт и меняют размеры текстовых блоков, высоту строк или переносы. Из-за этого заголовки, кнопки, карточки и соседние элементы неожиданно перемещаются. Снизить сдвиг помогают правильные метрики fallback-шрифта, предзагрузка, оптимальный font-display и компактные файлы WOFF2.

Дата актуальности: 22 июля 2026 года. Материал посвящён технической стороне оптимизации веб-шрифтов и подходит для лендингов, интернет-магазинов, блогов и интерфейсов, где стабильность первого экрана влияет на удобство чтения и взаимодействия.

CLS, или Cumulative Layout Shift, показывает, насколько сильно содержимое страницы самопроизвольно перемещается во время загрузки. Пользователь может открыть страницу и начать нажимать кнопку, а затем из-за появления шрифта кнопка или текст окажутся в другом месте. Метрика учитывает неожиданные сдвиги, а не обычные изменения интерфейса после осознанного действия пользователя.

Шрифт влияет на геометрию макета не только размером букв. Важны ширина символов, x-height, верхние и нижние выносные элементы, межстрочный интервал и встроенные метрики файла. Если резервный шрифт заметно отличается от основного, строка может стать длиннее или короче, переносы изменятся, а многострочный текст займёт другую высоту.

При медленной загрузке браузер может сначала показать текст системным шрифтом, а затем заменить его файлом сайта. Такой сценарий обычно улучшает видимость текста, но создаёт риск FOUT — краткого отображения fallback-шрифта. Если Arial, Inter, Roboto или другой резервный вариант имеет иные пропорции, браузер пересчитает ширину строк и высоту контейнеров после подстановки веб-шрифта.

При стратегии FOIT текст временно не отображается, пока браузер ждёт веб-шрифт. После загрузки содержимое появляется и занимает место, которого раньше визуально не было. Само появление текста может сдвинуть расположенные ниже блоки, особенно если высота заголовка, карточки или навигации не задана заранее.

Отдельный риск возникает, когда обычное, полужирное и курсивное начертания подключены разными файлами. Заголовок может отрисоваться одним вариантом, а после загрузки нужного веса изменить ширину и количество строк. Проблема усиливается, если браузер имитирует отсутствующее начертание, а затем заменяет его настоящим файлом.

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

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

Свойство font-display управляет поведением текста до загрузки шрифта. Значение swap обычно показывает fallback сразу и заменяет его основным шрифтом после загрузки. Это уменьшает риск невидимого текста, но не устраняет сдвиг, если метрики шрифтов различаются. Значение optional позволяет браузеру отказаться от поздней замены при неблагоприятных условиях, а fallback задаёт короткое окно ожидания и затем использует запасной вариант.

Для критичного текста нельзя выбирать font-display только по названию режима. Оцените компромисс между скоростью появления текста, визуальной идентичностью и стабильностью блока. Если замена всё равно происходит, основное внимание нужно уделить согласованию метрик, а не простой смене swap на другой параметр.

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

Согласуйте адрес предзагружаемого файла с фактическим источником в CSS и укажите корректный тип ресурса. Если браузер скачает один файл заранее, а таблица стилей запросит другой формат или другое начертание, дополнительная загрузка не даст ожидаемого эффекта и увеличит сетевую нагрузку.

Самый надёжный способ уменьшить шрифтовой сдвиг — подобрать резервный шрифт с похожей шириной символов и высотой строчных букв. Для более точной настройки CSS поддерживает параметры size-adjust, ascent-override, descent-override и line-gap-override. Они позволяют масштабировать fallback и корректировать его вертикальные метрики так, чтобы переход на основной шрифт меньше менял геометрию текста.

Размер корректировки подбирают по реальному сравнению, а не по универсальному числу. Возьмите характерный заголовок и абзац, проверьте количество строк, общую высоту и положение соседних элементов. Если fallback стал визуально слишком крупным или мелким, измените масштаб и повторите тест на мобильной ширине.

Для важных областей задавайте предсказуемую высоту через устойчивую структуру контейнера, корректный line-height и ограничения, соответствующие дизайну. Это особенно полезно для баннеров, шапки, карточек и первого заголовка. Резерв должен соответствовать реальному содержимому: чрезмерно большая пустая область ухудшает интерфейс и не является полноценным решением CLS.

Используйте современный формат WOFF2, удаляйте неиспользуемые начертания и ограничивайте набор символов нужными языками. Подмножество кириллицы, латиницы и знаков препинания может быть разделено на отдельные файлы, если архитектура сайта действительно использует такую схему. Чем меньше файл, тем раньше завершится загрузка и тем короче окно возможной замены.

Переменный шрифт иногда позволяет объединить несколько весов в один ресурс, но не всегда уменьшает итоговую передачу данных. Сравнивайте фактический размер, покрытие символов и сценарии загрузки. Не подключайте полный семейный набор, если интерфейсу нужны только обычное и полужирное начертания.

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

На странице оформления заказа текст кнопки сначала отображается обычным системным шрифтом, а после загрузки веса 600 становится шире. Кнопка увеличивается, соседний элемент переносится, и пользователь видит сдвиг. Решение — заранее подключить нужное начертание, не имитировать вес браузером и задать кнопке предсказуемые внутренние отступы и минимальную ширину.

Отдельная ошибка — пытаться убрать CLS визуальным скрытием проблемного блока. Такой подход может замаскировать симптом, но ухудшить доступность, задержать появление текста или создать скачок после снятия скрытия. Стабильность должна достигаться согласованием загрузки и геометрии, а не удалением содержимого из первого рендера.

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

Универсально лучшего значения нет. Swap быстро показывает текст и подходит, когда важна доступность содержимого, но поздняя замена может вызвать сдвиг. Optional даёт браузеру больше свободы и может избежать поздней подстановки, однако фирменный шрифт не всегда будет показан при первом посещении.

Preload сокращает время ожидания файла, но сам по себе не устраняет CLS. Если основной шрифт заметно отличается от fallback, даже быстрая замена может изменить переносы. Предзагрузку следует сочетать с подбором резервного шрифта, корректировкой метрик и ограничением количества критичных ресурсов.

Size-adjust масштабирует резервный шрифт, а ascent-override, descent-override и line-gap-override корректируют его вертикальные метрики. Вместе эти параметры помогают приблизить fallback к основному шрифту до момента замены. Настройку нужно проверять на реальных текстах, потому что одинаковый масштаб не гарантирует одинаковую ширину всех символов.

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

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

Чтобы уменьшить CLS, рассматривайте веб-шрифт как часть геометрии интерфейса, а не только как декоративный ресурс. Оптимизируйте WOFF2-файлы, загружайте критичные начертания заранее, выбирайте разумный font-display и согласуйте fallback с основным шрифтом по горизонтальным и вертикальным метрикам.