Конвертер TTF у WOFF2
З цього починається розміщення шрифту на власному сервері: WOFF2 — формат, який усі сучасні браузери завантажують першим, і найкомпактніша оболонка для даних TrueType, що вже є у вас. Ця сторінка також створює CSS-правило, яке його підключає.
Конвертер шрифтів
або перетягніть Файли TTF, OTF, WOFF … сюди ·
До 95 МБ на файл· До 20 файлів· Видаляються через 30 хв
Файли обробляються на наших серверах і видаляються через 30 хв.
Видалення писемностей, які ви не використовуєте, може зменшити веб-шрифт із сотень КБ до менш ніж 30 KB. Для шрифтів, які ви встановлюєте на комп'ютер, залишайте всі символи.
Вставте текст або символи, які має містити шрифт, наприклад слово з логотипу чи заголовок. Усе інше буде видалено.
Хінти покращують чіткість дрібного тексту на екранах Windows. Їх видалення часто заощаджує 10–30% для веб-шрифтів; автохінтинг додає їх шрифтам, які їх не мають.
Залиште порожнім, щоб зберегти оригінальну назву. Перейменування дає змогу встановити конвертований шрифт поруч з оригіналом без конфлікту.
Наприклад, Regular, Bold, Italic. Залиште порожнім, щоб зберегти оригінальну назву стилю.
Як користуватися цим інструментом
- 1
Виберіть файли TTF
Додайте всі накреслення й стилі, які плануєте використовувати: до 20 файлів, кожен до 95 MB. Змінні TTF також підходять і зберігають свої осі.
- 2
Залиште CSS увімкненим, за змоги задайте підмножину
Прапорець Додати CSS @font-face уже встановлено. У розділі Додаткові налаштування встановіть для Залишити символи значення «Базова латиниця» або «Латиниця + діакритичні знаки», якщо ваш сайт західною мовою, і розгляньте для Хінтинг значення «Видалити».
- 3
Конвертувати у WOFF2
Натисніть Конвертувати в WOFF2 і завантажте шрифти разом із файлом .css. Завантажте обидва на свій сайт і підключіть таблицю стилів або вставте правило у власну.
Як конвертувати TTF у WOFF2 для сайту?
Завантажте .ttf, залиште встановленим Додати CSS @font-face і натисніть Конвертувати в WOFF2. Ви отримаєте файл .woff2 і файл .css із правилом @font-face, що вказує на нього.
Чому для вебу варто використовувати саме WOFF2
TTF — це нестиснені дані таблиць: контури, метрики, кернінг, назви. WOFF2, опублікований як рекомендація W3C у 2018 році, зберігає саме ці таблиці, але пропускає їх через Brotli, алгоритм стиснення, який Google випустила 2015 року, попередньо переорганізувавши контури гліфів, щоб вони краще стискалися. Власні тести Google показали, що WOFF2 у середньому приблизно на 30% менший за старіший формат WOFF, а браузер після завантаження відновлює початкові дані шрифту, тож форми літер не змінюються.
Шрифти блокують відображення, тому їхній розмір важить більше, ніж видно з кілобайтів. Поки веб-шрифт не надійшов, браузер або ховає текст, або показує запасний, а пізня заміна може зсунути макет. Менші файли скорочують це вікно, а два параметри тут скорочують його ще більше: Залишити символи прибирає гліфи, яких ваші сторінки ніколи не показують, а Хінтинг зі значенням «Видалити» відкидає інструкції, які телефони й екрани з високою щільністю однаково ігнорують. Зберігайте оригінали TTF для настільного використання; WOFF2 у TTF згодом може розпакувати веб-шрифт, але не відновить гліфи, видалені підмножиною.
Розмір файлу: TTF проти WOFF2
TTF, повний набір символів
100%
Нестиснені таблиці шрифту, як на настільному комп’ютері
WOFF2, підмножина «Базова латиниця»
часто 10–25%
Стиснення Brotli і менше гліфів; залежить від шрифту
Правило @font-face для шрифту WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Підтримка WOFF2 у браузерах за версіями
2014
Chrome 36
Браузер Google першим типово декодує WOFF2.
2015
Firefox 39
Mozilla типово вмикає декодування WOFF2.
2016
Edge 14
Оригінальний Edge від Microsoft додає WOFF2 з Windows 10 Anniversary Update.
2018
Рекомендація W3C
Специфікацію остаточно затверджено; на той час Safari на macOS та iOS також декодує WOFF2.
TTF
Шрифт TrueType
TTF — формат шрифтів TrueType, розроблений Apple наприкінці 1980-х і випущений у 1991 році, потім ліцензований Microsoft. Він описує контури гліфів квадратичними кривими та містить інструкції хінтингу, які роблять текст чітким на екранах. TrueType підтримують усі настільні операційні системи, текстові процесори та дизайнерські програми. Йому бракує деяких розширених типографічних можливостей OpenType, а файли більші, ніж у веб-шрифтів.
- Стиснення
- Без втрат
- Прозорість
- –
- Анімація
- –
- Рік появи
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 — друга версія Web Open Font Format, що ґрунтується на стисненні Brotli від Google і опублікована як рекомендація W3C у 2018 році. Файли приблизно на 30% менші за WOFF, що допомагає швидше завантажувати сторінки. Усі сучасні браузери підтримують WOFF2, і це рекомендований формат вебшрифтів. Настільні операційні системи та дизайнерські програми не можуть встановлювати його напряму.
- Стиснення
- Без втрат
- Прозорість
- –
- Анімація
- –
- Рік появи
- 2018 · W3C (Google)
TTF у WOFF2 пакує настільний шрифт у контейнер зі стисненням Brotli, який віддають перевагу браузери, тож ті самі гліфи доходять до відвідувачів меншою кількістю байтів; зворотна сторінка існує для тих, кому потрібно встановити шрифт, знайдений в інтернеті.
Часті запитання про конвертацію TTF у WOFF2
Чи потрібен запасний TTF або WOFF поруч із WOFF2?
Для публічних сайтів сьогодні зазвичай ні. Chrome, Edge, Firefox і Safari підтримують WOFF2 уже багато років, а ті кілька браузерів, що не підтримують, як-от Internet Explorer 11, рідко варті додаткового файлу. Додайте результат TTF у WOFF як другий запис src, лише якщо аналітика показує таких відвідувачів.
Чому мій шрифт WOFF2 досі важить понад 100 KB?
Стиснення зменшує лише те, як зберігаються гліфи, а не їхню кількість. Шрифт, що охоплює латиницю, кирилицю, грецьку та в’єтнамську, містить усі ці набори. Саме підмножина лише тих писемностей, які ви справді показуєте, зменшує текстовий шрифт до десятків кілобайтів.
Що робить font-display: swap?
Вона наказує браузеру одразу показати текст запасним шрифтом, а коли ваш веб-шрифт завантажиться, замінити його, замість того щоб ховати текст під час завантаження. Додайте її до правила @font-face, як у прикладі вище, або використайте optional, якщо на повільному з’єднанні краще уникнути пізньої заміни.
Чи можна конвертувати TTF з Google Fonts у WOFF2 і розмістити на своєму сервері?
Так. Родини Google Fonts випускаються за ліцензією SIL Open Font License або Apache License, і обидві дозволяють конвертацію та самостійний хостинг. Власний хостинг файлу також позбавляє запиту до стороннього сервера.
Чи працює WOFF2 в email-розсилках?
Лише в деяких клієнтах. Apple Mail та iOS Mail завантажують веб-шрифти через @font-face, а Gmail і більшість версій Outlook їх ігнорують і показують запасний шрифт. Завжди вказуйте надійний системний шрифт у переліку шрифтів листа.