Веб-шрифты: скорость, лицензии и типографика
Хорошая типографика определяет восприятие сайта, но шрифты — один из главных «скрытых» убийц скорости: пара начертаний может весить больше всей вёрстки. В 2026 году правильный подход — подключить шрифты быстро, без «прыжков» текста и с легальными лицензиями. Разбираем полный арсенал.
Почему шрифты дорогие
Полный шрифт с кириллицей — это тысячи глифов. Расчёт простой:
1 начертание × 4 (Regular/Bold/Italic/BoldItalic) × 2 (латиница+кириллица)
= 4–8 файлов по 100–250 КБ woff2 = 400 КБ–1,5 МБ на «просто шрифты»Плюс рендеринг: браузер блокирует отрисовку текста, пока шрифт не загрузился (FOIT — flash of invisible text), если не задано иначе.
Четыре правила быстрых шрифтов
- WOFF2 + subsetting: отдавайте только нужные символы (кириллица + латиница), в формате woff2 — это экономит 60–80% веса.
- Переменные шрифты: одно начертание = вся ось весов (200–900). Вместо 4 файлов — один на семейство.
- font-display: swap — текст показывается системным шрифтом, пока грузится веб-шрифт. Никаких невидимых абзацев.
- preload + предзагрузка только для LCP: первый экран — preload, остальное — по мере появления.
@font-face {
font-family: 'Inter';
src: url('inter-latin-cyrillic.woff2') format('woff2');
font-weight: 400 900; /* переменный шрифт */
font-display: swap; /* нет невидимого текста */
unicode-range: U+0400-04FF; /* кириллица отдельным подмножеством */
}Где хостить: сам vs Google Fonts vs CDN
| Вариант | Плюсы | Минусы |
|---|---|---|
| Google Fonts (CSS API) | Бесплатно, оптимизировано | Зависимость, трекинг, блокировки для РФ-аудитории |
| Сам на сайте | Полный контроль, нет внешних зависимостей | Нужно готовить файлы (subsetting, woff2) |
| CDN шрифтов (fontsource) | Оптимизированные npm-пакеты | Сборка, не все шрифты |
Для аудитории из РФ Google Fonts может грузиться медленно или блокироваться — хостите шрифты у себя: дёшево, быстро, без трекинга.
font-display: swap и метрики
Поведение при загрузке — вопрос UX и метрик:
- swap — мгновенный системный шрифт, затем замена (FOUT). Лучший баланс для контентных сайтов.
- block — браузер ждёт до 3 секунд (FOIT): красиво, но абзацы «пустые» на медленных сетях.
- optional — если шрифт не успел за 100 мс, остаётся системный: максимальная скорость, но шрифт может «не появиться никогда».
- fallback — ждёт ~100 мс, затем системный с заменой.
При swap возможен сдвиг текста — влияет на CLS. Решение: size-adjust для шрифта-запасного, чтобы метрики системного шрифта совпадали с веб-шрифтом.
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107%; /* компенсация разницы в метриках */
ascent-override: 90%;
descent-override: 22%;
}Так подмена не «прыгает» и CLS остаётся в норме.
Лицензии: на что смотреть
- Google Fonts — открытые лицензии (OFL и др.), коммерческое использование обычно бесплатно.
- Коммерческие шрифты (MyFonts, Paratype, Fontlab): лицензия часто привязана к количеству просмотров/доменов — для большого трафика или клиентских проектов это деньги.
- Подключение через API (Google Fonts) — снимает вопросы, но для клиентов иногда требуют «историю» — храните копию файлов и лицензий.
- Проверка: файл лицензии при покупке, подтверждение коммерческого использования в письме — пригодятся в спорах.
Практический чек-лист
- Не более 1–2 семейств на сайт (3+ — уже типографический хаос).
- Переменные шрифты + подмножества + woff2.
- font-display: swap везде; fallback с size-adjust для CLS.
- preload только для шрифта первого экрана.
- Сам охостинг для РФ-аудитории.
- Проверка: PageSpeed (время загрузки шрифтов) и визуальная (нет «прыжков» текста).
«Шрифт — это 90% восприятия дизайна и 10% веса страницы, если всё сделано правильно. Плохо подключённые шрифты — частая причина „быстрого на бумаге, медленного в жизни“ сайта» — практика типографики, 2026.
Аудит: откройте Network → Fonts и посмотрите суммарный вес. Если больше 300 КБ — подключите переменный шрифт с subsetting и swap. Эффект — минус сотни килобайт и никаких пустых экранов.