Почему происходит подмена
HTML и CSS загружаются раньше файла шрифта. Браузер может сразу показать системный шрифт, затем заменить его фирменным. Это называется FOUT. Другой вариант - временно скрывать текст до загрузки шрифта.
Настройка Tilda
В расширенных настройках шрифтов Tilda можно разрешить показ системного шрифта во время загрузки. Справка предупреждает, что это способно вызвать короткое мерцание и изменение размеров текста. См. настройки шрифтов.
Сначала уменьшите сами файлы
Используйте WOFF2 и только необходимые начертания. Если загружается большой набор, браузер дольше ждет нужный файл.
Почему скачет верстка
Системный и фирменный шрифты имеют разные метрики. После замены строка может стать длиннее, заголовок перейти на новую строку, а соседний блок сдвинуться.
Как уменьшить эффект
- сократить число начертаний;
- выбрать близкий системный fallback;
- не делать критичные контейнеры слишком тесными;
- проверить мобильные ширины;
- избегать внешнего подключения одного семейства сразу из нескольких источников.
Не лечите все прелоадером
Полноэкранная заставка может визуально скрыть мерцание, но задерживает доступ к содержимому. Это обмен одной проблемы на другую.
Что проверить вручную
- проверьте водопад загрузки файлов шрифта;
- посмотрите, какой fallback используется первым;
- сравните метрики системного и фирменного шрифта;
- уберите дубли подключений;
- проверьте переносы на мобильной ширине после замены;
Выбирайте стратегию осознанно: быстрый системный текст с короткой заменой или ожидание фирменного файла. Для информационного сайта чаще важнее раннее появление содержимого.
На чем обычно ошибаются
Мерцание иногда пытаются скрыть задержкой появления всей страницы. В результате пользователь дольше смотрит на пустой экран. Это ухудшение обычно заметнее самой короткой подмены шрифта.
Смена шрифта часто является выбранным компромиссом
Если текст показывается системным шрифтом, а затем заменяется фирменным, браузер не ломает дизайн: он выполняет стратегию загрузки. Такой режим дает человеку контент раньше, но может вызвать FOUT и сдвиг строк. Альтернатива - ждать фирменный файл дольше и показывать текст позже.
Tilda прямо предупреждает, что показ системного шрифта до загрузки фирменного способен вызывать короткое мерцание и изменение размеров. Поэтому эту настройку нужно оценивать на реальном дизайне, а не включать автоматически. См. официальную справку.
Когда скачок становится проблемой
Если меняется высота первого экрана, прыгает кнопка или появляется заметный CLS, подберите более близкий fallback, сократите число начертаний и проверьте размеры контейнеров. Связанные материалы: собственные шрифты, загрузка шрифтов на Tilda и LCP, CLS и INP.
Сначала определите, что именно меняется
Если системный шрифт на мгновение заменяется фирменным, это ожидаемый сценарий загрузки веб-шрифта. Если одновременно меняется ширина строк и блоки прыгают по странице, проблема уже влияет на стабильность макета.
Сравнивайте метрики шрифтов, число начертаний и момент загрузки. Иногда лучший результат дает близкий по пропорциям запасной шрифт, который уменьшает визуальный скачок до появления основного.
Оцените влияние на стабильность макета
Если после загрузки шрифта меняются только очертания букв, проблема в основном визуальная. Если заголовок перескакивает на новую строку, кнопка смещается или первый экран меняет высоту, уже страдает стабильность интерфейса. Такой сценарий стоит проверять вместе с CLS.
Когда смена шрифта допустима
Краткая смена системного шрифта на фирменный может быть нормальной. Сначала оптимизируйте файлы и число начертаний, затем решайте, нужна ли дополнительная маскировка эффекта.
