Оптимизация веб-шрифтов: файлы, font-display и проверка загрузки
Обновлено .
Начните со списка реально используемых гарнитур и начертаний. Удаление лишнего файла часто проще сложной настройки загрузки. Если фирменный шрифт не нужен, системная гарнитура позволяет вообще обойтись без отдельного запроса.
Рабочий вариант без скачивания шрифта
.article-text {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
max-width: 70ch;
}Проверочная строка: Ёжик, съешь ещё булочку — 1 000 ₽. Здесь используется системный шрифт; отдельный файл для примера не загружается.
Подключение своего WOFF2
Следующий блок — шаблон подключения, а не ссылка на файл Alxa. Замените путь на реально размещённый и лицензированный файл. Значение font-weight должно соответствовать его начертанию.
@font-face {
font-family: "ProjectText";
src: url("/assets/project-text-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
.article-text { font-family: "ProjectText", system-ui, sans-serif; }swap даёт очень короткий период блокировки и позволяет впоследствии заменить резервную гарнитуру загруженной. Из-за различия метрик строки могут перераспределиться. optional ограничивает ожидание и может оставить резервный шрифт для текущего просмотра. Выбор зависит от того, насколько важна фирменная типографика при первом показе.
Проверяем одну правку за раз
- В Network отфильтруйте Font. Запишите число запросов, переданные байты, статус и источник.
- Повторите загрузку с отключённым кэшем и с имитацией медленной сети. Убедитесь, что текст виден и читаем.
- Посмотрите, какой шрифт реально отрисовал кириллицу и отдельные знаки.
- Сравните переносы до и после загрузки. Проверьте узкий экран, длинный заголовок и поля формы.
- Верните обычные настройки сети и проверьте повторный визит с кэшем.
Subset, variable и preload
Не передавайте ненужные начертания и символы. Но подмножество должно учитывать весь контент, включая будущие имена и пользовательский ввод. Переменный файл может заменить несколько начертаний, однако сравнивать нужно фактические байты — он не всегда меньше одного статического файла.
Preload уместен для действительно критичного файла, обнаруживаемого слишком поздно. Массовая предварительная загрузка шрифтов может конкурировать с другими ресурсами. Не добавляйте её до измерения. Здесь нет выдуманного выигрыша в миллисекундах: приведён воспроизводимый порядок проверки, а не замер вашего сайта.
Источники и проверка
По теме: Как выбрать бесплатный шрифт и проверить его лицензию.