Как пользоваться: Генератор веб-шрифтов
- Перетащите один или несколько файлов TTF или OTF в область загрузки. Добавьте все начертания семейства вместе.
- Проверьте примечание о лицензии для каждого шрифта. Выберите форматы вывода и, если нужно, символы для сохранения.
- Убедитесь, что вы имеете право конвертировать шрифт, затем нажмите Создать веб-шрифты.
- Сравните размеры, проверьте предпросмотр и нажмите Скачать ZIP. Загрузите папку
fontsи добавьте CSS на свой сайт.
Сначала проверьте лицензию на шрифт
Шрифты — это программное обеспечение, и их лицензии определяют, что с ними можно делать. Многие коммерческие лицензии разрешают использование только на компьютере или отдельно оплачивают веб-использование, а некоторые запрещают конвертацию файла вообще. Это может касаться и шрифтов, которые вы купили. Открытые лицензии, например SIL Open Font License, обычно разрешают веб-использование, но у них есть свои условия. Прочитайте лицензию перед конвертацией. devpack не проверяет лицензии, и вы полностью отвечаете за то, как используете шрифты и созданные файлы.
Какой формат шрифта выбрать?
WOFF2 подходит почти для любого сайта. Он даёт лучшее сжатие и работает во всех современных браузерах. Добавляйте WOFF только если нужна поддержка очень старых браузеров. TTF и OTF — десктопные форматы, и обычно они заметно крупнее.
Что такое сабсеттинг шрифта?
Шрифт может содержать тысячи символов, которые ваш сайт никогда не показывает. Сабсеттинг удаляет их, что может сильно уменьшить размер файла и ускорить страницы. Когда вы выбираете наборы символов, в CSS также добавляется unicode-range, поэтому браузер загружает шрифт только тогда, когда он нужен странице. Сохраняйте все языки, которые использует ваш сайт, потому что удалённые символы будут заменены другим шрифтом.
Что в ZIP?
- Папка
fontsс конвертированными файлами. stylesheet.cssс одним правилом@font-faceдля каждого шрифта, включая начертание и стиль.demo.html— страница, на которой видно работу каждого шрифта.FONT-INFO.txtс данными об авторских правах и лицензии, которые сообщает каждый шрифт.
Экспертные настройки
- Переменные шрифты: сузьте ось, удалите её или создайте статичные начертания, например 400 и 700. CSS получит правильный диапазон начертаний.
- Функции OpenType: оставьте стандартный набор, сохраните все или отметьте именно нужные.
- Вертикальные метрики: выровняйте высоту строки на разных платформах или задайте свои значения.
- Подходящий запасной шрифт: добавляет системный шрифт с подобранным размером, чтобы текст меньше смещался при загрузке веб-шрифта. Это помогает показателю смещения макета (CLS).
- Код: получите правила
@font-face, пример использования, теги preload или настройку для Tailwind CSS.
Какое значение font-display лучше?
swap сразу показывает текст запасным шрифтом, а затем переключает на ваш шрифт после загрузки. optional позволяет избежать этого переключения и сдвига вёрстки, но на медленном соединении ваш шрифт может не появиться вовсе. Чтобы ускорить работу, предзагрузите основной шрифт тегом link rel="preload" и проверьте страницу с помощью Теста скорости страницы.
Использование веб-шрифтов в Webflow
Скачайте файлы WOFF2 и загрузите их в разделе Site settings → Fonts → Custom fonts. Webflow создаст CSS за вас. Нужен собственный код в проекте? Поможет инструмент HTML и CSS в Webflow.
Также ищут как: конвертер шрифтов в woff2, ttf в woff2, otf в woff2, font-face css генератор, альтернатива font squirrel, генератор webfont.
Инструменты, которые хорошо сочетаются с Генератор веб-шрифтов
- Сабсеттер шрифтов — Сделайте шрифт заметно меньше, удалив символы, которые вы не используете.
- Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
- CSS-кнопки — Выберите одну из 24 анимированных CSS-кнопок: с заливкой, рамками, свечением, бликами и объёмным нажатием.