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 році, а у 2012-му він отримав статус рекомендації W3C; кожну таблицю шрифту він стискає за допомогою zlib. WOFF2 став рекомендацією W3C у 2018 році, перейшов на Brotli і спершу обробляє дані гліфів, через що зазвичай приблизно на 30% менший за WOFF. Картину доповнюють три побічні формати. EOT був власним вебформатом Internet Explorer, SVG-шрифти були раннім тимчасовим рішенням лише для Safari, а змінні шрифти, додані в OpenType 1.8 у 2016 році, вміщують цілий діапазон накреслень чи ширин в одному файлі.

Встановлюйте TTF або OTF і не переймайтеся вибором. Windows 10 і 11 встановлюють обидва через правий клік і Install, 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 містить назву сімейства, назву стилю, версію, рядок про авторські права й часто URL ліцензії; macOS «Каталог шрифтів» показує її в поданні інформації, а попередній перегляд шрифту у Windows — перші рядки. Покриття гліфів показує, якими мовами можна набирати текст цим шрифтом: суто латинський шрифт мовчки підставляє інший гарнітур для польських, турецьких чи в’єтнамських символів, яких йому бракує. У змінного шрифту таблиця fvar перелічує його осі, наприклад товщину від 100 до 900 або ширину від 75 до 125.

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

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

Два завдання лежать між категоріями. EPUB 3 приймає TTF, OTF і WOFF, тож електронні книги можуть використовувати будь-яку групу форматів, а файли SVG-шрифтів належать до тієї ж лінії, що й векторна графіка, але сьогодні важливі переважно для деяких програм плотерів і гравіювання, а не для браузерів.