WOFF2 vs WOFF vs TTF: какие форматы шрифтов когда использовать

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

TTF (TrueType Font) и OTF (OpenType Font) — два базовых формата шрифтов, которые используются в операционных системах и десктопных приложениях. TTF — старый формат, разработанный Apple в 1991 году, использует квадратичные кривые Безье для описания контуров букв. OTF — более новый формат (2002 год), основан на OpenType, может использовать кубические кривые Безье, поддерживает расширенные типографические функции (лигатуры, alternate glyphs, контекстные замены).

В вебе TTF и OTF используются как «сырые» форматы: они не сжаты, поэтому файлы большие. Размер типичного TTF-файла — 100–250 КБ, OTF — 80–200 КБ. Для веба это слишком много, поэтому были разработаны форматы WOFF и WOFF2 с компрессией. В каталоге FontHub мы автоматически генерируем WOFF2 и WOFF для всех шрифтов, чтобы минимизировать трафик.

WOFF (Web Open Font Format) — формат, разработанный в 2009 году специально для веб-типографики. Он представляет собой TTF/OTF с дополнительным сжатием (zlib) и метаданными (информация о лицензии, авторе, описании). Сжатие уменьшает размер файла на 40–60% по сравнению с TTF, до 40–80 КБ.

WOFF поддерживается во всех современных браузерах, включая IE9+, Chrome 5+, Firefox 3.6+, Safari 5.1+. Это делает его универсальным форматом для проектов, где нужна поддержка старых браузеров. Если у вас значимая доля IE11 или Safari 9, WOFF — обязательный формат в вашем @font-face стеке. Если вы поддерживаете только современные браузеры — можно обойтись без WOFF, но он всё ещё рекомендуется как fallback.

WOFF2 — следующее поколение веб-формата, разработано в 2014 году. Главное отличие от WOFF — алгоритм сжатия Brotli вместо zlib. Brotli даёт дополнительное сжатие 20–30% по сравнению с WOFF, что уменьшает размер файла до 30–60 КБ. Это особенно заметно на шрифтах с большим количеством глифов, например на кириллических подмножествах.

WOFF2 поддерживается в Chrome 36+, Firefox 39+, Safari 10.1+, Edge 14+. IE11 не поддерживает WOFF2, что в 2026 году не проблема (доля IE11 — менее 0.1%), но всё ещё учитывается в проектах с legacy-требованиями. Для всех современных проектов WOFF2 — основной формат, который должен идти первым в src-дескрипторе.

Размер файлов (для Inter Regular, 893 глифа): TTF — 312 КБ, OTF — 280 КБ, WOFF — 124 КБ, WOFF2 — 86 КБ. Разница между WOFF2 и TTF — почти в 4 раза. Если ваш сайт грузит 5 шрифтов, переход с TTF на WOFF2 экономит около 1 МБ трафика на каждом визите. Для высоконагруженных проектов это критично.

Совместимость (по caniuse.com): TTF — 99.5% (поддерживается везде, кроме очень старых браузеров), WOFF — 98.7% (поддерживается во всех браузерах с IE9+), WOFF2 — 97.8% (поддерживается во всех современных браузерах, кроме IE11). Если вам нужна поддержка IE11 — обязательно включайте WOFF как fallback. Если нет — можно ограничиться WOFF2.

Для веба: всегда WOFF2 как основной формат, WOFF как fallback для legacy-браузеров. TTF/OTF использовать не нужно — они весят в 3–4 раза больше и не дают преимуществ. Правильный @font-face стек: src: url('inter.woff2') format('woff2'), url('inter.woff') format('woff');. Этого достаточно для 99% современных проектов.

Для Figma и десктопных приложений: TTF или OTF. Figma и другие десктопные приложения не понимают WOFF/WOFF2, им нужен «сырой» формат. Скачивайте TTF или OTF из каталога FontHub, устанавливайте в ОС и используйте в Figma.

Для мобильных приложений (Android, iOS): зависит от платформы. Android поддерживает TTF и OTF, не поддерживает WOFF/WOFF2 нативно. iOS поддерживает TTF, OTF, WOFF (через WebKit). Для кросс-платформенных приложений часто используют TTF или OTF — это работает везде. Если у вас гибридное приложение с WebView, используйте WOFF2 — он работает в современных WebView и даёт наименьший размер.

Для разработки шрифтов: TTF/OTF как исходный формат, WOFF2/WOFF как дистрибутивные. В каталоге FontHub все шрифты доступны в трёх форматах: TTF (для десктопа), WOFF (для legacy веба), WOFF2 (для современного веба). Выбирайте тот, который нужен для вашей задачи.

Переменные шрифты (variable fonts) поддерживают все три формата: TTF Variable (несжатый), WOFF Variable (zlib), WOFF2 Variable (Brotli). WOFF2 Variable — самый компактный формат для переменных шрифтов, рекомендуемый для веба. Размер WOFF2 Variable для Inter (вся ось wght 100–900) — около 110 КБ, что сравнимо с одним статическим начертанием. Это делает переменные шрифты в формате WOFF2 оптимальным выбором для веб-проектов с тонкой иерархией весов.

При генерации CSS для переменного шрифта важно использовать корректную подсказку формата: format('woff2-variations') для WOFF2 Variable, format('woff-variations') для WOFF Variable. Без такой подсказки браузер может не активировать переменную ось. В каталоге FontHub при подключении переменных шрифтов через наш CDN подсказки генерируются автоматически.

Ещё один нюанс: при работе со шрифтами для разных регионов стоит учитывать локальные особенности. В Китае и Японии популярны браузеры с собственными движками рендера (QQ Browser, Baidu Browser), у которых есть нюансы поддержки WOFF2. В России и СНГ — доля старых версий Safari выше, чем в среднем по миру, поэтому WOFF-fallback важнее. В Европе и США — современные браузеры доминируют, WOFF2 покрывает 99% трафика. Для глобальных проектов с аудиторией в нескольких регионах рекомендуется подключать все три формата (WOFF2, WOFF, TTF) с корректными подсказками format — браузер возьмёт тот, который он понимает лучше всего. Для локальных проектов можно ограничиться WOFF2 + WOFF, без TTF. Размер TTF-файла в 3-4 раза больше WOFF2, и если у вас нет целевой аудитории на IE или специфических старых браузерах — TTF не нужен. В каталоге FontHub при подключении через CDN мы автоматически определяем браузер пользователя и отдаём оптимальный формат: для современных браузеров — WOFF2, для старых — WOFF. Это даёт лучшую производительность для каждого пользователя без необходимости вручную настраивать форматы.

«Формат шрифта — это не деталь. Это решение, которое влияет на каждый визит пользователя.» — Зак Лезерман

Выбор формата шрифта — это инженерное решение, которое влияет на скорость загрузки, совместимость и стоимость трафика. Для веба: WOFF2 как основной, WOFF как fallback, TTF/OTF не использовать. Для десктопа: TTF или OTF. Для мобильных: TTF/OTF для натива, WOFF2 для WebView. В каталоге FontHub все шрифты доступны во всех трёх форматах — выбирайте тот, который подходит под задачу, и не тратьте трафик на неподходящие форматы.