Поддержка кириллицы в веб-шрифтах: unicode-range и subsetting

Кириллица в веб-шрифтах — это не только вопрос «есть ли глифы». Это вопрос размера файла, скорости загрузки и рендера. Кириллическое подмножество типичного шрифта содержит 200+ глифов (против 100 у латиницы), что делает файл в 2–3 раза больше. На 3G-соединениях это может добавить 1–2 секунды к времени загрузки страницы. В этой статье — три техники оптимизации кириллических шрифтов: unicode-range, subsetting и font-display.

unicode-range — дескриптор @font-face, который указывает браузеру, для каких Unicode-диапазонов использовать данный шрифт. Если браузер видит, что на странице нет символов из указанного диапазона, он не грузит файл. Это позволяет подключать несколько подмножеств одного шрифта и автоматически грузить только нужные.

Пример для Inter с разделением на латиницу и кириллицу: @font-face { font-family: 'Inter'; src: url('inter-latin.woff2') format('woff2'); unicode-range: U+0000-007F, U+00A0-00FF; } и отдельно @font-face { font-family: 'Inter'; src: url('inter-cyr.woff2') format('woff2'); unicode-range: U+0400-04FF, U+0500-052F; }. Если на странице только латиница, браузер грузит первый файл, второй не грузит. Если и латиница, и кириллица — грузит оба. Это даёт экономию трафика на страницах с одним языком.

В каталоге FontHub при подключении шрифтов через наш CDN мы автоматически генерируем корректные unicode-range для всех поддерживаемых подмножеств. Вы подключаете один CSS-файл, и браузер сам решает, какие подмножества грузить, основываясь на содержимом страницы.

Subsetting — это физическое удаление ненужных глифов из файла шрифта. В отличие от unicode-range, который только указывает браузеру, какие глифы использовать, subsetting реально уменьшает размер файла. Если ваш сайт на русском и не использует, например, греческий или арабский, вы можете вырезать эти глифы из шрифта и получить файл в 2–3 раза меньше.

Инструменты для subsetting: pyftsubset (часть пакета fonttools, Python), glyphhanger (Node.js, обёртка над pyftsubset), FontForge (десктопное приложение). Для большинства задач достаточно pyftsubset. Пример команды: pyftsubset inter.ttf --unicodes='U+0400-04FF,U+0000-007F' --output-file=inter-subset.woff2 --flavor=woff2. Эта команда создаёт WOFF2-файл, содержащий только кириллицу и базовую латиницу.

В каталоге FontHub мы автоматически генерируем сабсеты для всех популярных шрифтов: Inter Latin, Inter Cyrillic, Inter Latin+Cyrillic, и т.д. Вы можете подключить только те подмножества, которые нужны вашему проекту. Для типичного русскоязычного сайта достаточно Latin+Cyrillic, что уменьшает размер файла с 86 КБ до 38 КБ (для WOFF2).

font-display — дескриптор, контролирующий рендер шрифта во время загрузки. Для кириллических шрифтов особенно важен: из-за большего размера файла время загрузки может быть дольше, чем для латиницы. Без font-display браузер может «моргнуть» невидимым текстом или подменой шрифта, что ухудшает пользовательский опыт.

Рекомендация для кириллицы: используйте swap. Это даёт мгновенный рендер текста в fallback-шрифте (обычно системном sans-serif), а при загрузке основного шрифта — подмену. Для кириллицы fallback-шрифт почти всегда есть в системе (на Windows — Tahoma, на macOS — Helvetica Neue, на Linux — Liberation Sans), поэтому пользователь сразу видит текст, а не пустое место. После загрузки основного шрифта происходит подмена, и текст приобретает нужный стиль.

Если вы используете блок-стратегию (font-display: block), будьте осторожны: для кириллических шрифтов блок на 3 секунды может привести к тому, что пользователь видит пустой экран почти 3 секунды. Это плохо для конверсии. Поэтому для кириллицы блок не рекомендуется — используйте swap.

Шаг 1. Подключите Inter через FontHub CDN. URL: https://cdn.fonthub.ru/css/inter?family=Inter:wght@400;700&subset=latin,cyrillic. CDN автоматически отдаёт CSS с корректными unicode-range и font-display: swap.

Шаг 2. В CSS используйте font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif. Если Inter не загрузился, браузер использует системный sans-serif. Для кириллицы это даёт мгновенный рендер в системном шрифте, а при загрузке Inter — подмену.

Шаг 3. Для переменного Inter используйте URL: https://cdn.fonthub.ru/css/inter-variable?family=Inter:wght@100..900&subset=latin,cyrillic. CDN отдаёт WOFF2 Variable с кириллическим подмножеством, размер — около 65 КБ (против 110 КБ без subsetting).

Ошибка 1: подключение полного шрифта без subsetting. Если вы подключаете Inter со всеми языками (латиница, кириллица, греческий, арабский, иврит), размер файла может достигать 300 КБ. Это избыточно для 99% проектов. Решение: используйте subset только с нужными языками.

Ошибка 2: неправильный fallback. Если fallback-шрифт сильно отличается от основного по x-height или контрасту, при подмене текст «прыгает». Решение: подбирайте fallback близкий по характеристикам. Для Inter — system-ui или -apple-system, для Playfair Display — Georgia, для Lora — 'Times New Roman'.

Ошибка 3: игнорирование font-display. Без font-display браузер может использовать стратегию block по умолчанию, что для кириллических шрифтов означает 3 секунды невидимого текста. Решение: всегда указывайте font-display: swap (или fallback для критических шрифтов).

Ещё один практический совет: при работе с кириллицей тестируйте рендер на разных операционных системах. One и тот же шрифт может по-разному отображаться на Windows, macOS и Linux из-за разной реализации хинтинга и субпиксельного сглаживания. На Windows с ClearType кириллица может выглядеть «жирнее», чем на macOS с CoreText. На Linux с FreeType — зависит от конфигурации, но часто рендер более «резкий». Для критичных проектов (банковские интерфейсы, корпоративные сайты) всегда тестируйте на реальных устройствах: Windows 10 + Chrome, macOS + Safari, Linux + Firefox. Эмуляторы и виртуальные машины не дают точной картины — особенно для субпиксельного рендера. Если у вас нет доступа к разным устройствам, используйте BrowserStack или аналогичные сервисы для тестирования. В каталоге FontHub мы тестируем все шрифты на пяти целевых платформах (Windows, macOS, Linux, Android, iOS) перед публикацией — и помечаем шрифты, у которых есть известные проблемы с рендером на конкретной платформе. Это помогает выбирать шрифты, которые предсказуемо работают во всех целевых контекстах.

«Кириллица не должна быть проблемой. Она должна быть особенностью, которую вы умеете оптимизировать.» — Михаил Шардин

Поддержка кириллицы в веб-шрифтах — это не «подключил и забыл». Это набор техник, которые при правильном применении уменьшают размер файлов в 2–3 раза и ускоряют рендер. unicode-range для автоматического выбора подмножества, subsetting для физического уменьшения файла, font-display для корректного рендера во время загрузки. В каталоге FontHub все три техники применяются автоматически при подключении через наш CDN, но если вы хостите шрифты сами — теперь вы знаете, как это сделать правильно.