TTF, OTF, WOFF и WOFF2 - это не хороший, лучший и самый новый формат. Это разные роли в жизни одного шрифта. TTF и OTF обычно ставят в Windows и macOS, открывают в Word, Figma и редакторах. WOFF и WOFF2 обычно не устанавливают в систему: их отдают браузеру через CSS, чтобы сайт быстро загрузил нужную гарнитуру.
Главное правило: для работы на компьютере берите TTF или OTF, для сайта готовьте WOFF2. Если нужен старый fallback, добавьте WOFF. Если нужно понять историю глубже, читайте длинный материал История форматов шрифтов: от Type 1 и TTF до WOFF2.
Короткая таблица
| Формат | Расшифровка | Главная роль | Где использовать |
|---|---|---|---|
| TTF | TrueType Font | Установка, обмен, системная работа | Windows, macOS, Word, Figma, архив |
| OTF | OpenType Font | Установка и профессиональные гарнитуры | Дизайн, верстка, редакторы, архив |
| WOFF | Web Open Font Format | Сжатая веб-упаковка | Старые веб-проекты и запасной источник |
| WOFF2 | Web Open Font Format 2 | Более компактная веб-доставка | Современный сайт через CSS @font-face |
Расширение файла не всегда рассказывает всю историю. Современный .ttf часто является OpenType-шрифтом с TrueType-контурами, а .otf - OpenType-шрифтом с CFF или CFF2-контурами. Microsoft в спецификации OpenType font file описывает OpenType как контейнер таблиц, который может хранить разные типы контуров и данных.
TTF: понятный формат для установки
TTF появился как формат TrueType и до сих пор остается самым привычным файлом шрифта для пользователя. Его легко установить в Windows и macOS, отправить дизайнеру, открыть в Font Book, подключить в Figma Desktop или выбрать в Word после установки.
TTF хорошо подходит, если вам нужно:
- установить шрифт на компьютер;
- передать файл коллеге для макета;
- использовать шрифт в Word, PowerPoint или графическом редакторе;
- хранить рабочий исходник рядом с проектом;
- проверить кириллицу, цифры и знаки локально.
Минус TTF не в качестве, а в роли. Отдавать полный TTF посетителям сайта обычно не стоит: файл может быть тяжелее, чем WOFF2, и не оптимизирован под веб-доставку.
OTF: не лучше TTF, а другой OpenType-вариант
OTF часто воспринимают как более профессиональный формат. Иногда это правда по экосистеме: многие коммерческие гарнитуры и сложные семейства распространяются как OTF. Но сам суффикс .otf не гарантирует лучшую кириллицу, кернинг или OpenType-фичи. Все зависит от качества конкретного файла.
OTF удобно использовать для:
- профессиональных гарнитур;
- шрифтов с богатой типографикой;
- обмена между дизайнерами и верстальщиками;
- установки в систему;
- хранения оригинала перед генерацией webfont.
TTF и OTF оба могут содержать таблицы OpenType: cmap, name, GSUB, GPOS, kerning, лигатуры, языковые правила и многое другое. Поэтому выбирать между ними нужно не по мифу OTF для печати, TTF для экрана, а по доступному исходнику, совместимости и качеству шрифта.
WOFF и WOFF2: формат для сайта
WOFF не заменяет дизайн шрифта. Это веб-упаковка: внутри лежат данные шрифта, но файл сжат и подготовлен для браузера. W3C описывает WOFF File Format 1.0 как формат упаковки для веба. WOFF2 развивает эту идею и использует более эффективное сжатие; спецификация WOFF File Format 2.0 стала современным ориентиром для webfont-доставки.
Для сайта это означает:
- WOFF2 обычно выбирают первым;
- WOFF оставляют только если нужна поддержка старых браузеров;
- TTF или OTF хранят как исходник, но не отдают всем посетителям без причины;
- перед публикацией делают subset, чтобы не грузить лишние языки и веса;
- подключение идет через CSS @font-face.
Если файл нужен именно для веба, не думайте: у меня уже есть TTF, просто положу его на сайт. Лучше собрать WOFF2 и проверить размер, font-display, fallback и покрытие символов.
Что выбрать для задачи
| Задача | Лучший формат | Почему |
|---|---|---|
| Установить шрифт в Windows | TTF или OTF | Система понимает оба формата |
| Установить шрифт на macOS | TTF или OTF | Font Book поддерживает TrueType и OpenType |
| Добавить шрифт в Word | TTF или OTF | Word берет шрифты из системы |
| Добавить шрифт в Figma | TTF или OTF | Figma работает с локальными системными шрифтами |
| Подключить шрифт на сайте | WOFF2 | Компактная веб-доставка |
| Поддержать старый браузер | WOFF как fallback | Старым проектам иногда нужен WOFF |
| Хранить исходник в архиве | TTF или OTF плюс LICENSE | Так проще переиспользовать и проверять права |
| Отдать пользователю файл для скачивания | TTF или OTF | Человек сможет установить его в систему |
Почему WOFF2 быстрее для веба
Сайт должен показать текст как можно раньше. Если браузеру отдать большой исходный файл со всеми языками и всеми начертаниями, он потратит лишнее время и трафик. WOFF2 помогает сжать данные шрифта, а subset уменьшает набор глифов до реально нужных символов.
Практический pipeline выглядит так:
- дизайнер хранит исходный TTF или OTF;
- разработчик выбирает нужные веса: например Regular и Bold;
- из исходника делается subset для кириллицы, латиницы и нужных знаков;
- subset конвертируется в WOFF2;
- CSS подключает файл через @font-face;
- страница использует fallback и font-display, чтобы текст не пропадал.
Подробнее об оптимизации есть отдельная статья Веб-шрифты без тормозов: WOFF2, preload, font-display и subset.
Можно ли конвертировать формат
Технически да: TTF или OTF можно конвертировать в WOFF2, а иногда обратно. Юридически - только если лицензия это разрешает. Конвертация может считаться модификацией или подготовкой derivative file, а web embedding может быть отдельным правом.
Перед конвертацией проверьте:
- разрешено ли web embedding;
- можно ли делать subset;
- можно ли менять имя файла и metadata;
- нужно ли сохранять license file рядом с webfont;
- нет ли запрета на распространение измененной версии.
OFL обычно позволяет такие рабочие операции при соблюдении условий, но commercial licenses могут быть гораздо строже. Если лицензия неизвестна, не публикуйте webfont на сайте.
Частые мифы
| Миф | Как на практике |
|---|---|
| OTF всегда качественнее TTF | Качество зависит от дизайна, таблиц, метрик и покрытия, а не только от расширения |
| WOFF2 можно просто установить в Word | WOFF2 предназначен для браузера, для Word нужен системный TTF или OTF |
| Если файл открылся, лицензия подходит | Техническая совместимость не равна юридическому разрешению |
| Для сайта нужно подключить все форматы | Обычно хватает WOFF2, WOFF нужен только для старой совместимости |
| Чем больше весов, тем лучше типографика | Лишние веса замедляют сайт и усложняют макет |
| Конвертация решает все проблемы | Она не добавляет отсутствующую кириллицу и не меняет условия лицензии |
Проверка перед публикацией
| Проверка | Что должно быть нормально |
|---|---|
| Формат для системы | TTF или OTF открывается и устанавливается |
| Формат для сайта | WOFF2 создан из разрешенного источника |
| Кириллица | Есть А-Я, а-я, Ё, ё, №, ₽, кавычки и тире |
| Начертания | Установлены только реально используемые веса и italic |
| Размер webfont | WOFF2 не похож на полный многоязычный исходник без subset |
| Лицензия | Разрешены commercial use, web embedding и конвертация |
| Fallback | Текст остается читаемым до загрузки шрифта |
Итог
TTF и OTF - форматы для установки, обмена и хранения исходника. WOFF и особенно WOFF2 - форматы для браузера. Хороший рабочий процесс не выбирает один формат навсегда, а использует каждый на своем этапе: TTF или OTF ставится в систему, затем из него готовится легкий WOFF2 для сайта. Так шрифт остается удобным для дизайнера и быстрым для пользователя.