WOFF2: что это

WOFF2 использует усовершенствованный алгоритм сжатия (на базе Brotli), который позволяет значительно уменьшить размер шрифта по сравнению с TTF, OTF и даже WOFF. Это помогает ускорить загрузку сайта и улучшить его производительность.

Для чего нужен формат WOFF2?

WOFF2 нужен для:

• Оптимизации загрузки сайта. Вес шрифта уменьшается на 30–50% по сравнению с WOFF и OTF.
• Поддержки современных браузеров. Все популярные браузеры (Chrome, Firefox, Safari, Edge) уже поддерживают WOFF2.
• Повышения SEO и Core Web Vitals. Быстрая загрузка сайта положительно влияет на пользовательский опыт и позиции в поиске.
• Снижения нагрузки на сервер. За счёт меньшего размера файлов уменьшается трафик и нагрузка на хостинг.

Пример сравнения форматов

Пример подключения WOFF2 на сайте

1. Генерация WOFF2-файла

Можно использовать генераторы:

• https://transfonter.org/
• https://www.fontsquirrel.com/tools/webfont-generator

Загрузите шрифт в формате .ttf или .otf, выберите выходной формат .woff2, и скачайте готовые файлы.

Подключение WOFF2 в CSS:

@font-face {

font-family: ‘MyFont’;

src: url(‘fonts/myfont.woff2’) format(‘woff2’),

url(‘fonts/myfont.woff’) format(‘woff’);

font-weight: normal;

font-style: normal;

font-display: swap;

}

Пояснения:

• font-family — название шрифта, используемое в дальнейшем в CSS.
• src — пути к файлам шрифта.
• font-display: swap — улучшает UX, подгружая системный шрифт до загрузки кастомного.

Поддержка браузерами

Важно: для полной совместимости желательно оставить WOFF как резервный формат.

Советы по использованию

• Используйте только нужные начертания (например, не подключайте bold и italic, если они не используются).
• Объединяйте шрифты, если используете несколько начертаний одного семейства.
• Минимизируйте подмножества символов — иногда хватает только латиницы, без кириллицы.
• Используйте font-display: swap или fallback шрифты, чтобы избежать “невидимого текста”.

Заключение

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