Как убрать прыгание кастомных шрифтов при загрузке

Использование пользовательских веб-шрифтов является одной из наиболее распространенных причин CLS.

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

Таким образом, один и тот же текст с одинаковыми свойствами размера шрифта и высоты строки может занимать разное количество места.

Настроив системный шрифт через ascent-override, descent-override, line-gap-override, size-adjust мы можем решить эту проблему.

Утилита fontpie https://github.com/pixel-point/fontpie

Плагин для postcss https://github.com/TomerAberbach/postcss-fontpie