Почему WOFF2 обычно легче других форматов веб-шрифтов

WOFF2 обычно легче других форматов веб-шрифтов, потому что использует современное сжатие Brotli и дополнительно оптимизирует внутренние таблицы шрифта. В результате браузер получает тот же набор знаков и почти те же данные о начертании в меньшем файле. Ниже разберём устройство формата, сравним его с WOFF, TTF и OTF и покажем, как уменьшить загрузку на практике.

WOFF2 — формат упаковки шрифтов для веба. Он предназначен для передачи шрифтов по сети и последующего использования в CSS через правило font-face. Внутри находятся данные OpenType или TrueType, таблицы с описанием контуров, метрик, кернинга и других параметров. Формат не меняет визуальную сущность гарнитуры: после распаковки браузер строит текст на основе тех же шрифтовых данных.

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

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

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

WOFF — более ранний веб-контейнер, который обычно использует сжатие на основе zlib или DEFLATE. WOFF2 разрабатывался как более компактная замена и использует Brotli, поэтому при одинаковом наборе символов и одинаковых шрифтовых данных файл WOFF2 часто получается меньше. Это не означает фиксированный процент экономии: результат меняется от гарнитуры к гарнитуре и зависит от того, насколько хорошо данные поддаются сжатию.

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

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

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

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

Размер файла — только один фактор. На загрузку также влияют число запросов, приоритет ресурса, кеширование, настройка font-display, предварительная загрузка и то, сколько начертаний действительно используется. Один хорошо подготовленный WOFF2 может быть эффективнее, чем несколько тяжёлых файлов, но подключать все веса «на всякий случай» всё равно не стоит.

Слово «обычно» в описании WOFF2 принципиально важно. Небольшой шрифт с ограниченным количеством знаков может почти не выиграть от дополнительной упаковки. Иногда экспортёр сохраняет редкие таблицы или служебные данные, которые увеличивают размер. При сравнении разных файлов также могут отличаться настройки hinting, OpenType-функции и состав символов.

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

Предположим, лендингу нужны обычное и полужирное начертания одной гарнитуры, а основной текст написан на русском языке. Подключение полных файлов со знаками для множества языков создаёт лишний объём. Практичная схема — экспортировать два WOFF2-файла с кириллицей, базовой пунктуацией и нужными служебными символами, затем подключить их в CSS с корректными font-weight.

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

Дизайн-система может использовать regular, medium, semibold и bold. Подключать четыре файла ко всем страницам необязательно. Сначала определите реальные роли: основной текст, заголовки, кнопки и подписи. Затем оставьте только необходимые веса, проверьте, не имитирует ли браузер отсутствующее начертание, и сравните суммарный размер набора WOFF2 с одним вариативным файлом.

Для нового сайта с современной аудиторией WOFF2 обычно является первым форматом для проверки. Если проект обязан поддерживать старые браузеры или специфические среды, решение принимают по матрице совместимости, а не по привычке. Дополнительный WOFF имеет смысл только тогда, когда есть подтверждённая потребность в fallback-формате; иначе он увеличивает число ресурсов и усложняет обслуживание.

При выборе учитывайте лицензию гарнитуры, язык контента, количество весов, необходимость лигатур и альтернативных знаков, поддержку variable font и способ доставки через CDN или собственный сервер. Проверьте, что сервер отдаёт корректный MIME-тип, включено кеширование, а CSS не загружает шрифт раньше времени на страницах, где он не используется.

Переименовать файл TTF в WOFF2 недостаточно. Расширение не меняет внутреннюю структуру и не добавляет Brotli-сжатие. Файл нужно корректно конвертировать специализированным инструментом или экспортировать из редактора, который поддерживает WOFF2. После конвертации проверьте, что имя семейства, вес, стиль и таблицы шрифта сохранились правильно.

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

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

В панели проекта может отображаться размер файла до передачи, а в браузере — размер после HTTP-сжатия, из кеша или с учётом нескольких запросов. Сравнивайте одинаковые сценарии: чистая загрузка, повторный визит, мобильное соединение и реальные страницы. Также оценивайте визуальный результат: слишком агрессивное сокращение таблиц может убрать нужные функции или символы.

WOFF2 использует Brotli и более компактное представление отдельных шрифтовых таблиц, а WOFF обычно опирается на zlib или DEFLATE. Поэтому при одинаковом содержимом WOFF2 часто занимает меньше места. Точная разница зависит от гарнитуры, количества глифов, OpenType-данных и параметров экспорта.

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

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

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

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

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

WOFF2 обычно легче WOFF, TTF и OTF благодаря Brotli и оптимизированной веб-упаковке, но лучший результат даёт сочетание формата, subset, разумного набора начертаний и правильной загрузки. Сначала определите реальные потребности интерфейса, затем сравните готовые файлы в браузере и выберите минимальный набор без потери качества.