Как исправить сдвиг макета шрифта

Что происходит?

Есть два распространённых эффекта. При мигании невидимого текста (FOIT) текст остаётся пустым, пока не загрузится шрифт. При мигании текста без стилей (FOUT) сначала появляется запасной шрифт, а затем происходит замена. Если шрифты отличаются по размеру, строки переносятся заново, и содержимое смещается. Это смещение учитывается в Cumulative Layout Shift (CLS), одном из Core Web Vitals от Google.

Выберите значение font-display

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

Подберите запасной шрифт

Это самое эффективное решение. Вы создаёте запасной шрифт из системных, с размером, подобранным так, чтобы он занимал примерно то же место, что и ваш веб-шрифт. Тогда при замене почти ничего не смещается:

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

Эти числа вычислять самостоятельно не нужно. В Webfont Generator откройте CSS, выберите Matched fallback font, и инструмент измерит ваш шрифт и сформирует правило.

Что ещё помогает

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

Проверьте результат

Запустите Page Speed Test и посмотрите на CLS. Хороший результат — 0,1 или меньше. Чтобы увидеть замену шрифта самостоятельно, ограничьте скорость соединения в инструментах разработчика браузера и перезагрузите страницу.