Предзагрузка шрифтов
При использовании внешних шрифтов браузер может сначала отобразить системный шрифт, а затем заменить его на веб-шрифт после загрузки файла. Это может привести к заметному изменению внешнего вида текста во время рендера. Чтобы минимизировать эффект, используйте font-display: swap и предзагрузку шрифтов.
Предзагрузка шрифтов позволяет браузеру начать загрузку важных вариантов шрифтов раньше, чтобы снизить задержку смены шрифта и улучшить восприятие скорости рендера.
Дескриптор font-display
font-display применяется внутри секции правила @font-face и указывает, как будет
отображаться шрифт, пока не загружен основной.
@font-face {
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
}
- auto
- Стратегию загрузки шрифта определяет браузер. Стратегия близка к
block - block
- Для шрифта задаётся короткий (около 3сек) период блокировки и бесконечный период подмены. То есть, пока
загружается основной шрифт, браузер показывает текст невидимым запасным шрифтом. И только после полной
загрузки, переключается на основной.
Используется для иконочных шрифтов. То есть для ситуаций, когда запасной шрифт ну никак не подходит и не поможет начать читать страницу раньше. - swap
- Для шрифта задаётся совсем короткий, практически незаметный период блокировки (меньше 100миллисекунд) и задаётся бесконечный период подмены. Браузер отображает текст запасным шрифтом, а когда будет подгружен основной шрифт, переключиться на него.
- fallback
- Для шрифта задаётся очень короткий период блокировки (менее 100 миллисекунд) и короткий период подмены (около
3 секунд).
Значение используется для того, чтобы пользователь мог как можно раньше прочитать текст и не очень важно, если это будет запасной, а не основной шрифт. - optional
- Для шрифта задаётся очень короткий период блокировки (порядка 100 миллисекунд) и не задаётся период подмены.
То есть, если шрифт не стал доступен практически мгновенно, то он и не будет загружен, а страница будет отрисована запасным.
Предзагрузка шрифтов с помощью link preload
<link rel="preload" href="my-font.woff2" as="font" type="font/woff2">
Если вы загружаете шрифт со стороннего ресурса, то может пригодиться атрибут crossorigin
<link rel="preload" href="my-font.woff2" as="font" type="font/woff2" crossorigin>
Подробнее про CORS: Дока Прелоад и CORS
А стоит ли предзагружать шрифты
Эрвин Хофман рассуждает, а стоит ли предварительно загружать шрифты для повышения производительности?