Что такое WOFF2

WOFF2 (Web Open Font Format 2) — контейнерный формат веб-шрифтов, созданный специально для доставки шрифтов в браузеры. Он упаковывает обычные OpenType/TrueType-шрифты с помощью Brotli-сжатия и структурных трансформаций, благодаря чему файлы обычно на 20–30% меньше, чем в WOFF, и заметно меньше, чем TTF/OTF.

Время прочтения:

4 минуты

Дата публикации:

18.06.25

41

Главная

Что такое WOFF2

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

По сути это тот же шрифт, но «упакованный для веба»: быстрее скачивается, лучше кешируется, корректно определяется браузерами.

Зачем он нужен

Производительность: меньше вес → быстрее FCP/LCP, меньше трафика;
Совместимость: поддерживается всеми современными браузерами; для совсем старых можно оставить fallback на WOFF;
Функции OpenType сохраняются: вариативные шрифты (variable fonts), лиги, локали — всё едет внутри контейнера.

Как подключать

Минимум

@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Var.woff2") format("woff2");
  font-weight:100 900;          /* для variable */
  font-style:normal;
  font-display:swap;            /* не держим FOIT */
}
body{ font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

С предзагрузкой (важно для LCP-текста)

<link rel="preload"
      href="/fonts/Inter-Var.woff2"
      as="font" type="font/woff2" crossorigin>

URL в preload должен совпадать с URL в @font-face, и если шрифт отдают с другого домена — добавьте crossorigin и CORS-заголовок на сервере.

Лучшие практики производительности

1. font-display: swap|optional — убирает «пустой текст» (FOIT);
2. Unicode-сабсеты и unicode-range — грузите только нужные наборы (латиница/кириллица отдельно, символ ₽ и т.п.):

@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-cyr.woff2") format("woff2");
  unicode-range: U+0400-04FF, U+0500-052F, U+20BD; /* кириллица + ₽ */
  font-display:swap;
}

3. Variable fonts вместо 5–10 отдельных файлов начертаний. Ограничьте оси (weight/ital).
4. Кеширование навсегда: версионированные имена и заголовки:

Cache-Control: public, max-age=31536000, immutable
Content-Type: font/woff2
Access-Control-Allow-Origin: *     # если шрифт с CDN

5. Preload только критичных гарнитур/начертаний (верх экрана), остальное — обычной загрузкой;
6. Совместимые метрики, чтобы не было CLS: при необходимости используйте font-size-adjust и/или ascent-override / descent-override / line-gap-override, чтобы fallback-шрифт занимал близкую высоту строк;
7. Не «гзипьте» WOFF2: он уже сжат. Убедитесь, что сервер не пытается повторно сжимать (Content-Encoding не нужен).

Самохостинг vs внешние CDN/каталоги

Самохостинг: контроль версий, приватность, стабильный кеш-ключ (часто быстрее);
Каталоги (например, Google Fonts): удобно и быстро начать, есть авто-сабсеты и вариативные файлы. Для строгой приватности/стабильности многие копируют файлы к себе.

Инструменты для оптимизации

Сабсеттинг (оставить только нужные глифы): pyftsubset (fonttools), glyphhanger, subset-упаковщики в билд-системах;
Конвертация в WOFF2: woff2_compress (Google), онлайн-инструменты;
Проверка веса/покрытия: отчёты Lighthouse/Performance Insights.

Частые ошибки

Предзагрузка без crossorigin → второй запрос к тому же файлу;
Несовпадение URL между <link rel=preload> и @font-face → preload «в никуда»;
Нет font-display → «белый» текст на первых кадрах;
Один огромный файл «на все языки» → лишние сотни килобайт;
Неверный MIME-тип (нужно font/woff2) → странности кеша/отдачи;
Полагаться на local() (можно, но даёт непредсказуемость внешнего вида на разных системах).

Мини-чек-лист WOFF2

Подключён format("woff2"), для легаси есть fallback-WOFF при необходимости;
Проставлен font-display: swap|optional;
Предзагружены только критичные файлы (rel=preload as=font type=font/woff2 crossorigin);
Включены сабсеты и/или unicode-range; variable-шрифт вместо множества статических;
Сервер отдаёт Content-Type: font/woff2, долгий кеш и (при CDN) CORS;
Проверены CLS/INP после внедрения (особенно на мобиле и 3G).

заключение

WOFF2 — стандартный, самый компактный формат веб-шрифтов. Самохостите или берите из каталога, но обязательно: font-display, сабсеты/variable, корректный preload/CORS и длинный кеш. Так вы сохраните фирменную типографику, ускорите рендер текста и избежите «белых» экранов и скачков макета.