В чём проблема
Веб-шрифт — ещё один файл, который нужно скачать. Пока он не загружен, браузер либо скрывает текст, либо показывает запасной шрифт, а затем заменяет его. Оба варианта неприятны: в первом случае страница пуста, во втором текст «дёргается» и вызывает смещение макета.
Управление отображением
Свойство font-display определяет, как браузер ведёт себя, пока шрифт загружается.
| Значение | Поведение | Когда подходит |
|---|---|---|
swap | Сразу запасной шрифт, затем замена | Основной текст: читаемость важнее внешнего вида |
fallback | Короткая невидимость, затем запасной шрифт | Компромисс для заголовков |
optional | Шрифт используется, только если успел загрузиться | Второстепенные шрифты, когда нужна стабильность |
block | Текст скрыт до загрузки шрифта | Практически не рекомендуется |
Пример подключения
@font-face {
font-family: "Main";
src: url("/fonts/main-cyrillic.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0400-04FF;
}Здесь подключён только нужный набор символов — кириллица, — что уменьшает файл, и задан режим отображения с подменой.
Приёмы ускорения
- Используйте формат WOFF2: он сжат лучше остальных и поддерживается везде.
- Оставьте только нужные начертания: каждая толщина и наклон — отдельный файл.
- Подключайте только используемые наборы символов.
- Предзагрузите один-два самых важных файла шрифта, но не все подряд.
- Размещайте шрифты на своём домене, чтобы не тратить время на дополнительное соединение.
- Подберите запасной шрифт, близкий по размерам, чтобы подмена почти не была заметна.
Системные шрифты как альтернатива
Самый быстрый шрифт — тот, который не надо скачивать. Для служебных текстов и небольших сайтов системный набор шрифтов даёт мгновенную загрузку и нулевое смещение. Для брендового оформления веб-шрифты остаются оправданными, но с дисциплиной, описанной выше.
Связано с другими показателями: смена шрифта — частая причина смещений, см. статью про CLS. Общая картина метрик — в статье про Core Web Vitals.
Где размещать шрифты
| Подход | Плюсы | Минусы |
|---|---|---|
| Системные шрифты | Мгновенно, без смещений | Ограниченный выбор оформления |
| Веб-шрифты на своём домене | Контроль над кешем и скоростью, без лишних соединений | Нужно самим подготовить файлы |
| Внешний сервис шрифтов | Удобно подключать | Зависимость от чужого сервера, дополнительное соединение |
Как проверить
- Откройте страницу с медленной сетью и убедитесь, что текст виден сразу, без пустых мест.
- Посмотрите, насколько заметна замена шрифта: сильные скачки означают, что запасной шрифт подобран неудачно.
- Проверьте число файлов шрифтов во вкладке сети: их не должно быть много.
Частые вопросы
Какое значение font-display выбрать для основного текста?
swap: текст сразу виден запасным шрифтом и заменяется основным после загрузки, поэтому читаемость не страдает.
Почему шрифты могут вызывать смещение макета?
Запасной и основной шрифты имеют разные размеры, и при замене текст меняет размер и сдвигает соседние элементы.
Сколько файлов шрифтов подключать?
Как можно меньше: только нужные начертания и наборы символов, а самые важные — предзагрузить.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.