Зменшення розміру шрифтів

Як створити підмножину шрифту

1. Перевірте ліцензію. Субсетинг створює змінену копію шрифту. Відкриті ліцензії, як-от SIL Open Font License (OFL) та Apache 2.0, це дозволяють; багато комерційних ліцензій для десктопа й вебу – ні, або лише за певних умов. Спершу прочитайте ліцензію вашого шрифту.
2. Перетягніть файл TTF, OTF або WOFF у зону завантаження або клацніть по ній, щоб вибрати його. Панель Вихідний шрифт показує гарнітуру, формат, розмір файлу, кількість гліфів і кількість символів, які шрифт підтримує.
3. Виберіть Символи, які залишити: Базова латиниця, Latin-1, Латиниця, як у Google Fonts, Французька та Цифри й знаки чисел можна комбінувати. Додайте власні символи в Символи з тексту (зберігається кожен окремий символ тексту) або в Діапазони Unicode, записані як у CSS: U+0020-007E, U+2013, U+04??.
4. Позначте Прибрати хінтинг, якщо хочете якомога менший файл.
5. Натисніть Створити підмножину шрифту. Рушій (приблизно 650 КБ) завантажується вперше, а потім шрифт обробляється на вашому пристрої.
6. Порівняйте розміри в Результат, подивіться Перегляд підмножини, а потім скористайтеся Завантажити TTF (або OTF) і Завантажити WOFF та скопіюйте правило CSS @font-face.

Файл шрифту ніколи не залишає ваш комп’ютер і не завантажується на сервер: він читається, обробляється й пакується заново у браузері.

Кирилиця й українська

Готових наборів для кирилиці в списку немає: за замовчуванням позначено французький набір. Щоб зберегти українські літери, додайте діапазон U+0400-04FF у Діапазони Unicode (він охоплює і, ї, є, ґ та решту кирилиці) або вставте свій український текст у Символи з тексту. Якщо у шрифті немає кирилиці, рядок Немає у шрифті покаже, яких символів бракує.

Що робить субсетинг

Шрифт часто містить сотні чи тисячі гліфів: кирилицю, грецьку, в’єтнамську, символи, альтернативні форми. Сторінка, написана англійською чи французькою, використовує лише їх частку. Цей інструмент запускає hb-subset, субсетер текстового рушія HarfBuzz (той самий код використовують Google Fonts і багато інструментів збирання), скомпільований у WebAssembly. Він залишає гліфи для вибраних вами символів, а також гліфи, потрібні функціям OpenType для їх відображення (лігатури на кшталт «fi», капітель і форми з діакритикою, якщо їх можна дістати з ваших символів), і видаляє решту. Кернінг та інші таблиці розмітки скорочуються відповідно.

Типові результати: повний шрифт з латиницею, кирилицею й грецькою на 300 КБ може зменшитися до 20–30 КБ для французького тексту, а шрифт логотипа, зведений до літер одного слова, часто важить кілька кілобайтів.

Рядок Немає у шрифті перелічує символи, які ви просили, а шрифт їх не має. Браузери намалюють їх запасним шрифтом.

Формати виводу й unicode-range

• TTF/OTF: підмножина зберігає тип контурів оригіналу (TrueType або CFF).
• WOFF: той самий шрифт, у якому кожну таблицю стиснуто за допомогою zlib. Його читає кожен сучасний браузер. Вхідний WOFF спершу розпаковується.
• WOFF2 недоступний: для його стиснення Brotli й перетворень таблиць у браузері немає кодувальника, а файли WOFF2 тут також не читаються. Спершу конвертуйте WOFF2 у TTF (наприклад, за допомогою fontTools). Ваш сервер також може стискати TTF/OTF «на льоту» за допомогою gzip або Brotli.

Правило CSS @font-face перелічує файл WOFF першим, задає font-display: swap і додає unicode-range, побудований із символів, які справді є в підмножині. Завдяки unicode-range браузер завантажує файл лише тоді, коли сторінка використовує один із цих символів, тож гарнітуру можна розділити на кілька файлів (наприклад, латиниця й кирилиця), і кожен відвідувач завантажить лише потрібне. Відредагуйте Назва font-family, щоб вона збігалася з назвою у вашій таблиці стилів.