Шрифты: загрузка, подмножества и отображение текста

Прямой ответ

Шрифт загружается отдельным файлом, поэтому до его получения текст отображается резервным шрифтом. Режим отображения определяет поведение в период загрузки.

@font-face {
  font-family: 'Main';
  src: url('/fonts/main-cyrillic.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0400-04FF;
}

Параметр unicode-range ограничивает набор символов, для которых применяется файл, поэтому загружаются только требуемые подмножества. О предзагрузке шрифта — в статье про preload и prefetch.

Подмножества символов и резервный шрифт

Два аспекта определяют объём загрузки и стабильность отображения текста.

Подмножества символов. Полный файл шрифта содержит все поддерживаемые наборы, поэтому объём велик. Разделение на подмножества по наборам символов сокращает объём, поскольку загружается только требуемая часть.

Резервный шрифт. До загрузки целевого шрифта текст отображается резервным. Резервный шрифт с близкими метриками сокращает смещение макета при переключении.

Практическое следствие: резервный шрифт подбирается по метрикам целевого, поскольку различие в ширине символов вызывает смещение макета.

Отдельный аспект — переключение шрифта. Замена резервного шрифта на целевой изменяет ширину текста, поэтому макет смещается. Близкие метрики сокращают величину смещения.

Три признака некорректной настройки шрифтов.

Полный файл без подмножеств. Загружаются наборы символов, которые не используются, поэтому объём избыточен.

Резервный шрифт с иными метриками. Переключение вызывает заметное смещение макета.

Режим block для большого объёма текста. Текст не отображается до загрузки, поэтому страница выглядит пустой.

О метриках скорости отрисовки — в статье про FCP и LCP; о наборах символов для разных языков — в статье про локализацию.

Предзагрузка шрифта требует атрибута crossorigin, поскольку шрифты запрашиваются в режиме с проверкой источника.

Формат файла и поддержка браузерами

Объём загрузки шрифта определяется форматом файла, поэтому выбор формата влияет на время получения.

Современный формат сжатия. Файл занимает меньше места по сравнению с прежними форматами, поэтому загрузка выполняется быстрее. Поддержка охватывает актуальные браузеры.

Прежние форматы. Требуются для поддержки устаревших браузеров, поэтому включаются как резервные варианты. Объём загрузки растёт, если указываются несколько форматов.

Число начертаний. Каждое начертание загружается отдельным файлом, поэтому перечень начертаний определяет суммарный объём загрузки.

Практическое следствие: указывается современный формат как основной, прежние форматы — только при требовании поддержки устаревших браузеров.

Отдельный аспект — объём подмножества. Подмножество с малым числом символов занимает мало места, поэтому дробление по наборам сокращает загрузку для страниц с ограниченным составом текста.

Кэширование шрифта и повторные загрузки

Файл шрифта кэшируется браузером, поэтому при повторном посещении загрузка не выполняется.

Длительное кэширование. Файл шрифта с версией в имени кэшируется надолго, поэтому повторная загрузка не требуется. О стратегиях — в статье про кэширование браузера.

Повторный запрос при различии параметров. Шрифт запрашивается в режиме с проверкой источника, поэтому при различии параметров загрузка выполняется повторно.

Практическое следствие: параметры запроса шрифта должны совпадать при предзагрузке и фактическом использовании, иначе файл загружается дважды.

Практика: настройка загрузки шрифтов

1. Разделите шрифт на подмножества. Загружаются только наборы символов, используемые на странице, поэтому объём сокращается.

2. Укажите диапазон символов для каждого подмножества. Браузер загружает файл только при наличии символов из диапазона.

3. Выберите режим отображения. swap обеспечивает видимость текста сразу, optional исключает переключение при медленной загрузке.

4. Подберите резервный шрифт по метрикам. Близкая ширина символов сокращает смещение макета при переключении.

5. Предзагрузите шрифт первого экрана. Загрузка начинается до обнаружения шрифта в стилях, поэтому переключение происходит раньше.

6. Ограничьте число начертаний. Каждое начертание загружается отдельным файлом, поэтому объём растёт.

7. Проверяйте смещение макета при переключении. Заметное смещение указывает на различие метрик резервного и целевого шрифта.

Рекомендации:

1. Различайте объём файла и число запросов. Каждое начертание и подмножество загружается отдельным файлом, поэтому избыточное дробление увеличивает число запросов.
2. Учитываем режим отображения. block скрывает текст до загрузки, поэтому для большого объёма текста применяется swap.
3. Проверяйте поведение при медленной загрузке. Режим отображения определяет, видит ли пользователь текст до получения шрифта.
4. Фиксируйте перечень начертаний. Добавление начертания увеличивает объём загрузки, поэтому необходимость проверяется.
5. Пересматривайте подмножества при изменении языков. Добавление языка требует включения соответствующего набора символов.

Практический сценарий: макет смещался при загрузке шрифта

Контекст: при загрузке страницы текст смещался, поскольку резервный шрифт отличался по метрикам от целевого.

1. Диагностика. Резервный шрифт имел иную ширину символов, поэтому при переключении на целевой шрифт ширина строк изменялась. Смещение было заметным на заголовках и элементах с фиксированной шириной.
2. Причина. Резервный шрифт выбран произвольно, без учёта метрик целевого. Переключение изменяло ширину текста, поэтому макет смещался.
3. Действия. (а) Подобрали резервный шрифт с близкими метриками и указали его в перечне; (б) добавили предзагрузку шрифта первого экрана, чтобы сократить период отображения резервным; (в) разделили шрифт на подмножества по наборам символов, чтобы сократить объём загрузки; (г) установили режим отображения, обеспечивающий видимость текста сразу; (д) проверили величину смещения после изменения и убедились в её сокращении.
4. Результат. Смещение макета при переключении шрифта сократилось, поскольку метрики резервного шрифта близки к целевому.

Вывод: резервный шрифт с иными метриками вызывает смещение макета при переключении. Подбор резервного шрифта по метрикам и сокращение периода загрузки уменьшают смещение.

FAQ

Что делает режим font-display: swap? Текст отображается резервным шрифтом сразу, а после загрузки целевого шрифта происходит переключение. Текст виден в период загрузки.

Зачем нужны подмножества символов? Полный файл шрифта содержит все наборы, поэтому объём велик. Подмножество включает только используемые символы, поэтому загружается меньше данных.

Нужен ли crossorigin при предзагрузке шрифта? Да, шрифты запрашиваются в режиме с проверкой источника, поэтому без атрибута ресурс загружается повторно.

Как уменьшить смещение макета при переключении? Подобрать резервный шрифт с близкими метриками и сократить период загрузки предзагрузкой шрифта первого экрана.

Источники: MDN @font-face, font-display, unicode-range — ссылки в шапке.