WOFF2 против WOFF: какой формат выбрать для загрузки сайта

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

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

Материал актуален на 22 июля 2026 года. Рекомендации относятся к обычным сайтам, интернет-магазинам, блогам, лендингам и веб-приложениям, где шрифты подключаются через правило @font-face.

WOFF — Web Open Font Format, специальный контейнер для доставки шрифтов через интернет. Он предназначен для использования в браузере и обычно содержит данные OpenType или TrueType в сжатом виде. Формат появился как веб-ориентированная альтернатива прямой раздаче исходных файлов TTF и OTF.

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

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

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

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

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

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

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

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

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

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

На восприятие скорости также влияет стратегия font-display. Значение swap позволяет сначала показать текст резервным системным шрифтом, а затем заменить его веб-гарнитурой. Значение block может временно скрывать текст, а значение optional даёт браузеру больше свободы при слабом соединении. Конкретный выбор зависит от роли шрифта и требований к фирменному оформлению.

Для подключения используется правило @font-face. В нём задают имя семейства, путь к файлу, начертание и стиль. Если доступны оба формата, в списке источников указывают WOFF2 первым, а WOFF вторым. Браузер выбирает поддерживаемый источник и не должен скачивать оба файла для одного начертания.

Пример записи в CSS: font-family: SiteSans; src: url('/fonts/sitesans-regular.woff2') format('woff2'), url('/fonts/sitesans-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap. Для полужирной версии создают отдельное правило с тем же именем семейства и значением font-weight: 700.

Имена файлов должны ясно отражать семейство и начертание: например, sitesans-regular.woff2, sitesans-italic.woff2 и sitesans-bold.woff2. Такая схема снижает риск подключить не тот файл и облегчает дальнейшее обслуживание. После публикации проверьте вкладку Network в инструментах разработчика: браузер должен запрашивать нужный формат, а сервер — возвращать корректный MIME-тип и успешный статус ответа.

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

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

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

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

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

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

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

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

Причиной может быть неверный путь к файлу, ошибка в синтаксисе @font-face, неправильный font-weight, отсутствие нужных глифов, серверная ошибка или ограничение политики загрузки ресурсов. Начните диагностику с вкладки Network и консоли браузера, затем проверьте CSS, имя семейства и ответ сервера.

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

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