Оптимизация веб-шрифтов
Иан Бин написал хорошее руководство по оптимизации загрузки шрифтов — "5 steps to faster web fonts".
Иан рассказывает про основные способы ускорения загрузки шрифтов: preload, preconnect, хостинг шрифтов на основном домене, использование WOFF2 и т.п. Про уменьшение размера файла шрифта с помощью сабсеттинга и возможные проблемы, которые могут появиться после применения этой оптимизации.
Очень доступно с помощью диаграмм объясняется суть опций дескриптора font-display:
— Опция swap используется для замены фоллбек-шрифта загруженным шрифтом без ограничения по времени, при этом текст рендерится с помощью фоллбек-шрифта без задержки.
— При использовании опции block браузер ждёт загрузку шрифта примерно три секунды и не отображает текст. По истечении трёх секунд отображается фоллбек-шрифт, который заменяется загруженным шрифтом без ограничений по времени.
— С опцией optional веб-шрифт будет отображён только в том случае, если он будет загружен в первые 100 миллисекунд после начала загрузки страницы. Если за это время шрифт не успеет загрузиться, текст будет отображён с помощью фоллбек-шрифта. Тем самым пользователи сайта не столкнутся со сдвигом контента из-за смены шрифтов при первом визите.
— С опцией fallback браузер также ждёт 100 миллисекунд прежде чем отобразить фоллбек-шрифт, но в отличие от optional шрифт будет заменён, если он загрузится не более чем за три секунды.
В общем, полезная статья. Рекомендую почитать, если используете веб-шрифты на своём сайте.
https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/