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