Блог · Производительность
31 октября 2026
Веб-шрифты: как
не терять скорость
font-display, подмножества символов и почему один лишний шрифт стоит целой секунды загрузки.
font-display, подмножества символов и почему один лишний шрифт стоит целой секунды загрузки.
Незаметная, но частая причина медленной загрузки
Веб-шрифт — это отдельный файл (обычно 20-100 КБ на начертание), который браузер должен скачать, прежде чем показать текст этим шрифтом. Если сайт подключает 4-5 начертаний «на всякий случай», это может добавить к загрузке лишние сотни килобайт и заметную задержку до появления читаемого текста.
Показывать текст сразу или ждать красивый шрифт
| Значение | Поведение |
|---|---|
| swap | Показывает системный шрифт сразу, заменяет на веб-шрифт, когда он загрузится — рекомендуется для большинства сайтов |
| block | Ждёт веб-шрифт короткое время, текст невидим — риск FOIT (flash of invisible text) |
| optional | Использует веб-шрифт, только если он успел загрузиться очень быстро — иначе остаётся системный навсегда в этой сессии |
@font-face {
font-family: 'Geologica';
src: url('geologica.woff2') format('woff2');
font-display: swap;
}Зачем грузить арабские и тайские символы, если сайт на русском
Полный файл шрифта включает символы для десятков языков и специальные знаки, которые сайту почти никогда не нужны. Google Fonts и большинство современных инструментов позволяют указать нужный unicode-range — например, только кириллицу и базовую латиницу для брендовых названий — и получить файл в разы легче.
Совет: у Google Fonts подмножество можно указать прямо в URL через параметр &subset=cyrillic — не нужна отдельная сборка шрифта.
Меньше, чем кажется дизайнеру на старте
Переменные шрифты (variable fonts) — альтернатива: один файл покрывает весь диапазон начертаний через CSS-параметр font-variation-settings, вместо отдельного файла на каждый вес.
Короткие ответы на главное
Обычно достаточно 2-3: regular, medium/semibold для заголовков и, если нужно, bold. Каждое лишнее начертание — это ещё один файл на загрузку.
Системные шрифты (system-ui) грузятся мгновенно, потому что уже есть на устройстве — компромисс с уникальностью дизайна, но выигрыш в скорости заметный.
Cumulative Layout Shift — метрика того, насколько страница «прыгает» при загрузке. Смена шрифта после загрузки веб-версии сдвигает текст и картинки, что ухудшает CLS.
Настроим шрифты так, чтобы сайт выглядел красиво и грузился мгновенно.