Скачок текста после загрузки веб-шрифта (эффект, известный как FOUT) возникает, когда браузер сначала показывает текст резервным системным шрифтом, а затем заменяет его на загруженный кастомный шрифт с другими пропорциями букв.
Почему это происходит
Кастомный шрифт обычно загружается отдельным файлом, который не готов мгновенно при первом рендере страницы. Пока файл шрифта загружается, браузер вынужден показать текст каким-то шрифтом — обычно резервным системным, который может отличаться по ширине символов от целевого дизайнерского шрифта.
Решение — подбор похожего резервного шрифта
Указывайте в CSS резервный шрифт, максимально близкий по метрикам (ширине символов, высоте строки) к основному кастомному — это минимизирует видимый скачок при замене одного на другой после загрузки.
Технический параметр font-display
CSS-свойство font-display: swap управляет поведением замены шрифта — правильная настройка вместе с подходящим резервным шрифтом снижает и заметность, и продолжительность эффекта скачка текста.
