TTF, OTF или WOFF: какой формат шрифта выбрать для ПК и сайта

TrueType — самый старый из четырёх форматов. Apple выпустила его вместе с System 7 в 1991 году, а Microsoft приняла его для Windows 3.1 годом позже. Шрифт TrueType описывает каждую букву квадратичными кривыми: у них одна контрольная точка на изогнутый сегмент, и на раннем железе их было дёшево рисовать. Кроме того, в нём есть хинтинг: небольшие программы внутри шрифта, которые подтягивают стебли и кривые к пиксельной сетке, чтобы текст оставался чётким на экранах с низким разрешением. Расширение .ttf до сих пор означает шрифты с такими квадратичными контурами.

OpenType, анонсированный Microsoft и Adobe в 1996 году, — это скорее контейнер, чем новый тип контуров. Он может содержать контуры TrueType или контуры PostScript в таблице CFF: это кубические кривые с двумя контрольными точками на сегмент. К контурам добавлены таблицы вёрстки для продвинутой типографики: стандартные и дискреционные лигатуры, капитель, старостильные цифры, стилистические наборы, контекстные альтернативы и кернинг. По соглашению OpenType на основе CFF сохраняют как .otf, а OpenType с контурами TrueType сохраняет расширение .ttf.

WOFF и WOFF2 — контейнеры, созданные для веба. WOFF был подготовлен в 2009 году и стал рекомендацией W3C в 2012-м; он сжимает каждую таблицу шрифта с помощью zlib. WOFF2 стал рекомендацией W3C в 2018 году, перешёл на Brotli и сначала предобрабатывает данные глифов, поэтому обычно получается примерно на 30% меньше WOFF. Картину дополняют три побочных формата. EOT был собственным веб-форматом Internet Explorer, шрифты SVG — ранним временным решением только для Safari, а вариативные шрифты, добавленные в OpenType 1.8 в 2016 году, упаковывают целый диапазон начертаний или ширин в один файл.

Устанавливайте TTF или OTF и не думайте, какой из них выбрать. Windows 10 и 11 ставят оба по щелчку правой кнопкой и пункту Установить, macOS открывает оба в «Шрифтах», а рабочие столы Linux подхватывают их из ~/.local/share/fonts после обновления кэша шрифтов. Word, Photoshop, настольное приложение Figma, Affinity и LibreOffice читают оба. Если дизайнер прислал одно семейство в обеих версиях, OTF обычно та, в которой шрифт рисовал сам автор, а TTF — конвертация для старого ПО.

Случаи, когда разница важна, редки. Некоторые программы для плоттеров и вышивки, игровые движки и библиотеки отображения для микроконтроллеров понимают только контуры TrueType, поэтому OTF на основе CFF в них выглядит сломанным, и его нужно конвертировать из OTF в TTF. В обратную сторону: на компьютере WOFF и WOFF2 напрямую не устанавливаются, эти файлы упакованы для браузеров. Устанавливайте только одну версию семейства: TTF и OTF с одинаковым внутренним именем путают меню шрифтов, и приложение может выбрать не тот.

Все актуальные версии Chrome, Edge, Firefox и Safari читают WOFF2, поэтому он должен быть первым, а часто и единственным источником в правиле @font-face. Добавляйте после него строку WOFF, только если в аналитике ещё встречаются браузеры примерно до 2016 года, например старые Android WebView или браузеры встроенных телевизоров. Браузер перебирает список src по порядку и скачивает первый поддерживаемый формат, так что запасной вариант современным посетителям ничего не стоит. Если у вас уже есть настольный файл TrueType, TTF в WOFF создаст такой запасной вариант за один проход.

Не отдавайте на сайте исходные TTF или OTF, если только платформа не вынуждает, как некоторые конструкторы писем и старые системы управления контентом. Браузеры их отображают, но файлы передаются без сжатия, если сервер не сжимает шрифты gzip, и любой получает готовую к установке копию. Строка font-display: swap ниже велит браузеру сразу показать текст запасным шрифтом и подменить его вашим, когда тот загрузится, вместо того чтобы скрывать текст до 3 секунд в ожидании.

По возможности размещайте файлы на собственном домене. Chrome, Safari и Firefox теперь разделяют кэши по сайтам, поэтому шрифт, загруженный с общего CDN, больше не используется повторно на разных сайтах, а своё размещение экономит DNS-запрос и соединение. Добавляйте <link rel="preload"> только для одного-двух начертаний, которые видны на первом экране: предзагрузка всех стилей конкурирует с изображениями за канал.

Одно текстовое начертание с латиницей в формате WOFF2 обычно весит 20–60 KB. Тот же шрифт в виде несжатого TTF часто в два-три раза больше, а семейство, которое покрывает ещё греческий, кириллицу и вьетнамский, может превышать 200 KB на стиль. Китайские, японские и корейские шрифты — совсем другой масштаб: полное начертание CJK содержит десятки тысяч глифов и обычно занимает несколько мегабайт даже после сжатия WOFF2, а это слишком много, чтобы загружать до показа текста страницы.

Подмножество убирает символы, которые страница не использует, а unicode-range сообщает браузеру, какие символы покрывает файл, чтобы он скачивал его, только если страница действительно их содержит. Google Fonts применяет именно это для CJK, нарезая каждое семейство на множество мелких фрагментов, которые загружаются по требованию. Для ваших шрифтов опция Оставить символы в конвертере шрифтов обрезает файл до Latin + accents или Только введённые мной символы ещё до отправки на сервер; для всего, что вы устанавливаете на компьютер, оставляйте Все символы.

Конвертация TTF в OTF и обратно для шрифтов на основе TrueType — это смена контейнера: таблица контуров, метрики и функции вёрстки переносятся без изменений. Интереснее случай, когда OTF на основе CFF превращается в TTF. Кубические кривые нельзя скопировать в формат квадратичных контуров, поэтому каждая кривая перерисовывается одним или несколькими квадратичными сегментами с допуском, намного меньшим пикселя. Подсказки PostScript тоже не переносятся, поэтому инструмент OTF в TTF предлагает для параметра Хинтинг варианты «Сохранить», «Удалить» или Автохинтинг.

Самая частая конвертация — с веба обратно на компьютер. Вы скачиваете тему или дизайн-набор, находите только файлы .woff или .woff2, а шрифт нужен в Word или Figma. WOFF в TTF снимает сжатие и записывает исходные таблицы обратно, так что глифы, кернинг и функции получаются такими же, как были. Нельзя восстановить только то, что веб-версия уже потеряла: символы, убранные при создании подмножества, или подсказки, удалённые ради экономии байтов.

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

Файл шрифта — это небольшая база данных, и три её части отвечают на большинство вопросов. Таблица name хранит имя семейства, имя стиля, версию, строку об авторских правах и часто ссылку на лицензию; в macOS её показывает информационный вид «Шрифтов», а в Windows первые строки видны в предварительном просмотре шрифта. Покрытие глифов показывает, на каких языках можно набирать текст: шрифт только с латиницей молча подставит другую гарнитуру для польских, турецких или вьетнамских символов, которых в нём нет. Для вариативного шрифта таблица fvar перечисляет оси, например насыщенность от 100 до 900 или ширину от 75 до 125.

Лицензию стоит проверить, прежде чем что-либо выкладывать в сеть. Коммерческие студии часто продают отдельные лицензии для компьютера, веба и приложений, а лицензия на компьютер обычно разрешает установку на определённое число машин, но не раздачу файла посетителям сайта и не включение в мобильное приложение. Конвертация меняет формат файла, но не лицензию, поэтому WOFF2, сделанный из настольного TTF, подчиняется тем же условиям, что и TTF. Шрифты под лицензией SIL Open Font License, к которой относится большинство Google Fonts, можно конвертировать, делать из них подмножества и размещать у себя.

Большинство вопросов о шрифтах сводится к тому, где файл будет жить. Если он установлен на компьютере или упакован в приложение, берите TrueType или OpenType; если его скачивает браузер, берите сжатые веб-контейнеры. Таблица сопоставляет типичные задачи с подходящим форматом и конвертацией, которая к нему приводит, так что историю можно пропустить и сразу перейти к нужному файлу.

Две задачи лежат между категориями. EPUB 3 принимает TTF, OTF и WOFF, поэтому в электронных книгах можно использовать оба семейства форматов, а файлы шрифтов SVG принадлежат к той же линии, что и векторная графика, но сегодня важны главным образом для некоторых программ плоттеров и гравировки, а не для браузеров.