Как добавить свои шрифты на сайт

1. Подготовьте файлы шрифта

Убедитесь, что ваша лицензия разрешает использование в интернете. Затем перетащите файлы TTF или OTF в Webfont Generator и скачайте ZIP-архив. Обычно нужны только файлы WOFF2.

2. Загрузите файлы

Скопируйте папку fonts на свой сайт, например в /fonts/. Шрифты должны загружаться с вашего домена или с сервера, который отправляет правильный заголовок Access-Control-Allow-Origin.

3. Добавьте правила @font-face

Для каждого начертания и стиля нужно одно правило:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Используйте одно и то же имя семейства для всех начертаний. Браузер сам выберет нужный файл для обычного и жирного текста.

4. Примените шрифт

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Всегда указывайте запасные шрифты: они отображаются, пока ваш шрифт загружается, или если он не загрузился.

Добавление шрифтов на популярных платформах

• Webflow: откройте Site settings → Fonts → Custom fonts и загрузите файлы WOFF2.
• WordPress: блочные темы могут управлять шрифтами через библиотеку шрифтов в Site Editor. В других темах добавьте файлы в дочернюю тему и разместите CSS в её таблице стилей.
• Tailwind CSS: добавьте правила в свой CSS, затем задайте шрифт как значение темы. На вкладке Tailwind в Webfont Generator вы получите готовый код.

Проверьте, что всё работает

Откройте свой сайт, затем инструменты разработчика в браузере. На панели Network выберите фильтр Font и перезагрузите страницу. У каждого файла должен быть статус 200. Ошибка 404 обычно означает, что путь в CSS неверный. Заблокированный запрос чаще всего связан с заголовком cross-origin. Затем запустите Page Speed Test, чтобы увидеть, как шрифты влияют на скорость.