Генератор @font-face
Выберите файлы шрифта.
Как пользоватьсяСобственный шрифт на сайте, как надо
.woff2, .woff, .ttf или .otf, сразу несколько
CSS
Выберите файлы, чтобы создать код.
Preload (no <head>, só das fontes da primeira tela)
Доступно на: 
Генератор @font-face: для чего нужен
Чтобы использовать собственный шрифт на сайте, не завися от Google Fonts, нужно разместить файлы и объявить каждый через @font-face. Ошибка в насыщенности или забытый font-display делают текст невидимым при загрузке или с фальшивым полужирным.
Выберите файлы, и инструмент определит насыщенность и начертание по названию (Regular, Bold, SemiBold, Italic, 700, вариативный), сгруппирует форматы одного варианта, создаст правила с font-display: swap и тег preload с crossorigin для шрифта первого экрана и покажет предпросмотр с настоящим шрифтом.
Как пользоваться
- Выберите файлы шрифта.
- Проверьте название семейства, насыщенности и папку.
- Скопируйте CSS и тег preload.
Когда использовать
- Использование фирменного шрифта на сайте.
- Размещение шрифта вместо Google Fonts.
- Исправление шрифта с неправильным полужирным.
Частые вопросы
Какой формат шрифта использовать?
WOFF2. Он сжат и поддерживается всеми актуальными браузерами, поэтому на большинстве сайтов достаточно его. TTF и OTF работают, но весят заметно больше; конвертируйте в WOFF2 перед публикацией.
Для чего нужен font-display: swap?
Показывает текст сразу системным шрифтом и заменяет вашим, когда он докачается. Без этого браузер может скрывать текст на несколько секунд, что PageSpeed указывает как проблему.
Нужно ли использовать preload для всех шрифтов?
Нет, только для тех, что используются на первом экране, обычно одного или двух (основной текст и заголовок). Слишком много preload конкурирует за соединение с главным изображением и может ухудшить загрузку. Для preload шрифта нужен атрибут crossorigin, даже на собственном домене.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.