Сегодня мы поговорим про CSS и как правильно настроить загрузку шрифтов с помощью дескриптора
font-display в @font-face.Этот дескриптор важен для управления тем, как будет отображаться текст до того, как шрифт будет загружен.
@font-face {
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
}🔑 Параметры для
font-display:* auto — поведение по умолчанию, зависит от браузера.
* block — текст скрыт до 3 секунд; если шрифт не загрузился, показывается запасной, потом текст перерисовывается. Плюс: текст с нужным шрифтом без «скачка». Минус: может быть невидимым, может сильно ухудшить UX и LCP.
* swap — сразу показывается запасной шрифт, после загрузки шрифта происходит замена. Плюс: текст виден, улучшает UX и SEO. Минус: возможен визуальный «скачок».
* fallback — скрытие 100 мс, потом запасной шрифт; если основной не загрузился через 3 с, остаётся запасной. Замена на загруженный шрифт без перезагрузки не произойдёт.
* optional — скрытие 100 мс, затем запасной шрифт; замена на основной возможна только после обновления страницы.
✨ Рекомендация: чаще всего используйте
swap (он стоит по умолчанию в Google Fonts), а если необходимо избежать мелькания текста, выбирайте optional.Материалы:
MDN Web Docs — font-display
W3C — CSS Fonts Module Level 4
❓ Как вы настраиваете `font-display` в своих проектах?
#frontend #CSS #UIUX #WebDev