@font-face Генератор веб-шрифтов
Переменные шрифты, WOFF2 и CSS в один клик
Перетащите ваши файлы TTF, OTF, WOFF или WOFF2 — включая переменные шрифты — выберите ваши настройки и загрузите готовый к размещению пакет с WOFF2, WOFF, полным stylesheet.css и живой демонстрационной страницей.
Перетащите шрифты сюда или нажмите, чтобы просмотреть
TTF, OTF, WOFF, WOFF2 и переменные шрифты — допускаются несколько файлов
Выбранные шрифты
Настройки преобразования
Это имя, которое вы будете использовать в своем CSS, например, font-family: 'MyName';. Оставьте пустым, чтобы сохранить оригинальное имя семейства шрифта из файла.
Управляет тем, как текст отображается во время загрузки веб-шрифта.
Путь, используемый внутри url(...) в сгенерированной таблице стилей.
Совет: нажмите Ctrl+Enter для генерации.
Ваш пакет веб-шрифтов готов
ZIP содержит: преобразованные шрифты, stylesheet.css и живую demo.html.
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 для сценариев offline-first или одного файла.
Конфиденциальность и лицензирование
Файлы никогда не покидают ваше устройство — все обрабатывается в вашем браузере. Всегда убедитесь, что лицензия вашего шрифта позволяет встраивание веб-шрифтов перед публикацией на вашем сайте.