Как уменьшить размер веб-шрифта без потери нужных символов

Уменьшить размер веб-шрифта можно без заметной потери качества, если удалить из файла неиспользуемые глифы, оставить только нужные начертания и сохранить подходящий формат WOFF2. Главное — сначала определить языки, знаки и стили, которые действительно нужны сайту, а затем проверить кириллицу, цифры, пунктуацию и специальные символы в браузерах.

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

Файл шрифта содержит не только буквы, которые видит посетитель. Внутри могут находиться глифы для десятков языков, математические знаки, валюты, исторические символы, альтернативные формы букв и технические таблицы OpenType. Если сайт использует только русский текст и несколько латинских символов, полный универсальный файл часто содержит значительный запас, который браузеру никогда не понадобится.

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

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

Для русскоязычного проекта недостаточно оставить только буквы от А до Я. Нужны строчные и прописные буквы, ё и Ё, цифры, базовая пунктуация, скобки, кавычки, тире, многоточие и символы, которые используются в интерфейсе. Если в брендинге или коде встречаются английские слова, добавьте латиницу, иначе отдельные фрагменты могут перейти на системный шрифт.

Статичный макет не всегда отражает реальный контент. Интернет-магазину нужны обозначения валют и дробные значения, сервису аналитики — математические знаки, календарю — цифры и разделители дат, а форме обратной связи — кавычки и дефисы. Если символ отсутствует в подмножестве, браузер подставит другой шрифт, и строка может выглядеть неровно.

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

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

Свойство unicode-range позволяет связать разные файлы с разными диапазонами символов. Например, один ресурс может содержать кириллицу, другой — латиницу, третий — расширенную пунктуацию. Браузер получает подходящий ресурс, когда он нужен тексту страницы, поэтому не обязательно загружать весь набор сразу.

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

Подключайте только те начертания, которые реально применяются в дизайне. Если обычный текст набран одним весом, а заголовки — другим, третий полужирный вариант не нужен. Курсив также не следует добавлять «на всякий случай»: его отсутствие не критично, если стиль нигде не используется и браузер не должен имитировать наклон.

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

WOFF2 предназначен для веб-доставки и использует эффективное сжатие. Обычно его выбирают как основной формат для современных браузеров, сохраняя резервный вариант только при необходимости поддержки старых окружений. Конвертация сама по себе не удаляет ненужные глифы: сначала создайте subset, затем преобразуйте именно оптимизированный файл.

Не заменяйте исходный мастер-файл уже сжатой копией. Храните редактируемую версию отдельно, а для сайта готовьте производственные файлы. Так можно безопасно изменить список символов, добавить язык или новое начертание без потери исходных данных.

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

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

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

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

Откройте страницу с длинным текстом, заголовками, числами, датами, ценами и всеми поддерживаемыми языками. Отключите шрифт в инструментах разработчика и сравните поведение с включённой версией. Ищите пропавшие символы, неожиданный fallback, скачки ширины строк, неправильный вес и задержку появления текста.

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

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

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

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

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

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

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

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

Добавьте их в явный список символов и проверьте на отдельной тестовой строке. В русском тексте важны не только буквы, но и типографские знаки: разные кавычки, длинное тире, многоточие, знак процента и неразрывные пробелы. Автоматический сбор по неполному набору страниц может их пропустить.

Проверьте, есть ли глиф в конкретном начертании, правильно ли подключён файл и не ограничивает ли его unicode-range. Если символ действительно отсутствует, добавьте его в подмножество и пересоберите ресурс. Временный fallback допустим, но для заголовков и фирменных элементов он часто заметен визуально.

Выбор зависит от структуры сайта. Один компактный файл проще кэшировать и подключать на небольшой русскоязычной странице. Несколько файлов оправданы для разных языков, крупных проектов и страниц, где посетителю не нужны все письменности одновременно. Оценивайте суммарную передачу и число запросов, а не только размер одного файла.

Чтобы уменьшить размер веб-шрифта без потери нужных символов, проведите аудит контента, создайте подмножества, удалите неиспользуемые начертания, используйте WOFF2 и при необходимости разделите языки через unicode-range. После сборки обязательно проверьте реальные страницы, динамические строки и fallback в браузерах.