Якщо ви надсилаєте шрифти TTF на свій сайт, ви передаєте приблизно на 30% більше даних, ніж потрібно. WOFF2 надає ту саму типографіку у значно меншому файлі, і усі сучасні браузери підтримують його. Ось як конвертувати — і чому це важливо для продуктивності вашого сайту.
Чому WOFF2?
WOFF2 (Web Open Font Format 2.0) використовує стиснення Brotli, щоб зменшити розмір шрифтів на приблизно 30% порівняно з TTF, без втрат якості. Графічні елементи шрифту, підказки, міжбуквений інтервал та всі типографські функції зберігаються ідентично. Коли браузер завантажує файл WOFF2, він розпаковує його до тих самих даних, що й оригінальний TTF.
Вплив на продуктивність є реальним. Шрифти є ресурсами, що блокують відображення — браузер не відобразить текст, поки шрифти не завантажаться. 120KB TTF, який стає 84KB WOFF2, означає, що текст з'явиться швидше, особливо на мобільних з'єднаннях. Google's Core Web Vitals безпосередньо вимірюють це: менші шрифти покращують Largest Contentful Paint (LCP) та зменшують Cumulative Layout Shift (CLS) від зміни шрифтів.
Підтримка браузерів універсальна. Chrome, Firefox, Safari та Edge підтримують WOFF2. Єдині браузери, які не підтримують їх, це Internet Explorer та дуже старі браузери Android — обидва нижче 1% світового трафіку.
Як конвертувати
Використання WOFF2 у CSS
Після отримання файлу WOFF2 посилайтеся на нього у вашому стилі. Перелічіть WOFF2 першим з TTF резервним варіантом для максимальної сумісності:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}Директива font-display: swap повідомляє браузеру показувати резервний текст одразу, а замінювати його на власний шрифт після завантаження, уникнувши невидимого тексту під час завантаження шрифту.
Забезпечення відповідності ліцензії шрифтів
Багато комерційних ліцензій шрифтів містять положення, які обмежують завантаження файлів шрифтів на сторонні веб-сервіси. Це створює проблему: вам потрібно конвертувати шрифт у WOFF2 для продуктивності, але більшість інструментів конвертації вимагають завантаження шрифту на сервер.
Звичайно, завжди перевіряйте конкретні умови ліцензії вашого шрифту. Але локальна природа перетворення Morph видаляє найпоширенішу проблему зі згодою.
Інші перетворення шрифтів
Morph також підтримує перетворення OTF у WOFF2, WOFF у WOFF2, TTF у OTF та будь-яку іншу комбінацію TTF, OTF, WOFF і WOFF2. Чи потрібні вам безкоштовні шрифти, щоб почати? Перегляньте понад 1 500 безкоштовних шрифтів у бібліотеці шрифтів Morph.