Генератор вебшрифтів

@font-face Генератор вебшрифтів

Змінні шрифти, WOFF2 та CSS в один клік

Скиньте свої файли TTF, OTF, WOFF або WOFF2 — включаючи змінні шрифти — виберіть свої налаштування та завантажте готовий до розміщення пакет з WOFF2, WOFF, повним stylesheet.css та живою демонстраційною сторінкою.

Перетягніть шрифти сюди або натисніть, щоб переглянути

TTF, OTF, WOFF, WOFF2 та змінні шрифти — дозволено кілька файлів

100% на стороні клієнта

Конвертація відбувається повністю у вашому браузері за допомогою WebAssembly. Ваші шрифти ніколи не завантажуються.

Змінні шрифти та всі формати

TTF, OTF, WOFF та WOFF2 в — оптимізований WOFF2 з виходу, з повною підтримкою осей змінних шрифтів (wght, wdth, slnt, ital).

Готовий до виробництва вихід

Включає stylesheet.css з правильним font-display, необов'язковим local() та demo.html, щоб ви могли безпосередньо вставити пакет у свій проект.

Що таке генератор вебшрифтів?

Генератор веб-шрифтів перетворює шрифти для настільних ПК або завантажені файли шрифтів (TTF, OTF, WOFF, WOFF2 — включаючи сучасні змінні шрифти) у формати, які браузери можуть завантажувати через веб — переважно WOFF2 сьогодні, з WOFF як спадковим резервом — і створює відповідні CSS @font-face декларації, щоб ви могли самостійно розміщувати типографіку вашого веб-сайту.

Чому самостійно розміщувати шрифти?

Самостійне розміщення дає вам повний контроль над продуктивністю, конфіденційністю та надійністю. Немає запиту до Google Fonts (корисно для GDPR), немає додаткового DNS запиту, ви можете попередньо завантажити файл, і ви точно вирішуєте, які ваги, стилі та осі відправляються з вашим сайтом.

Як працює конвертація

WOFF2 обгортає ваші контури TTF/OTF у контейнері, стиснутому за допомогою Brotli, спеціально розробленому для вебу — зазвичай на 30% менше, ніж WOFF, і на понад 50% менше, ніж сирий TTF. WOFF — це старіший обгортка, стиснута за допомогою zlib, яка зберігається як резерв для дуже старих браузерів. Наш генератор запускає офіційний кодувальник і декодувальник WOFF2 від Google, скомпільований у WebAssembly, тому конверсія відбувається локально у вашому браузері. Скиньте WOFF2, який ви завантажили з Google Fonts, і ми прозоро декодуємо його назад у контейнер sfnt перед повторним кодуванням — вам ніколи не потрібно шукати оригінальний TTF.

Що ви отримуєте в пакеті

  • Шрифти у WOFF2 (і, за бажанням, WOFF/TTF) для кожного завантаженого шрифту — включаючи змінні шрифти, збережені як один маленький файл.
  • Повний stylesheet.css з одним правилом @font-face на файл, правильні формат() підказки, діапазони font-weight, font-style, font-stretch, font-display та необов'язковий local().
  • Сторінка demo.html, щоб ви могли попередньо переглянути кожну вагу, стиль і вісь в кількох розмірах перед публікацією.
  • Необов'язкове вбудування Base64, щоб відправити шрифт вбудованим у ваш CSS для сценаріїв офлайн або однофайлових.

Конфіденційність та ліцензування

Файли ніколи не залишають ваш пристрій — все обробляється у вашому браузері. Завжди переконуйтеся, що ліцензія на ваш шрифт дозволяє вбудовування вебшрифтів перед публікацією на вашому вебсайті.

Часто задавані питання