Как подключить шрифт на сайт: WOFF2, CSS и проверка

Чтобы подключить шрифт на сайт, сохраните разрешённый для веба файл WOFF2, опишите каждое нужное начертание через @font-face и задайте запасной системный стек. Результат принят, если текст виден сразу, нужный файл загружается без 404, а макет не прыгает после замены шрифта.

Сначала проверьте право использования

Файл из настольной программы не всегда разрешено размещать на сайте. Найдите лицензию и убедитесь, что она допускает web embedding, нужный домен и коммерческое использование. Если условий нет или они неясны, выберите шрифт с явной веб-лицензией.

Есть исходная страница шрифта и текст лицензии.
Разрешено размещение файла на вашем домене.
Понятно, можно ли преобразовывать формат и подмножество.
Зафиксировано, какие начертания действительно нужны.

Правило выбора: одно хорошо читаемое семейство с двумя нужными начертаниями полезнее полного набора, который замедляет каждую страницу.

Подготовьте структуру файлов

Создайте папку /fonts/ и положите туда файлы с понятными именами, например brand-regular.woff2 и brand-bold.woff2. Не используйте пробелы, кириллицу и случайные версии в имени. WOFF2 обычно даёт лучшую компрессию среди современных веб-форматов, что отмечает официальный гайд web.dev.

Оставьте только реально используемые начертания.
Проверьте лицензию до конвертации.
Сохраните WOFF2 рядом с CSS или укажите абсолютный путь.
Не заменяйте разные веса одним файлом.
Сделайте резервную копию исходного CSS.

Теория понятна, дальше нужен ваш сайт, а не пример из статьи. На бесплатном вебинаре страницу собирают с нуля и сразу публикуют в интернете.

Собрать свой сайт

Опишите начертания через @font-face

Для каждого веса нужен отдельный блок. Значение font-display определяет, как браузер показывает текст до готовности файла. MDN описывает режимы swap, fallback и optional в справке font-display.

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

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

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

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

h1, h2 {
  font-weight: 700;
}

По теме: Как сделать сайт на роутере: локально и без риска

Подключите CSS в правильном порядке

Файл с @font-face должен загружаться до правил, которые используют семейство. Если определения находятся в fonts.css, подключите его в <head>. На собственном домене путь проще контролировать, а зависимость от внешнего сервиса не блокирует текст при сетевой ошибке.

<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/styles/main.css">

Не добавляйте preload для всех файлов. Предзагрузка уместна только для одного критичного шрифта первого экрана и требует crossorigin, даже если файл лежит на том же домене. Избыточный preload конкурирует с CSS и главной картинкой.

Проверьте результат в браузере

Откройте DevTools и вкладку Network.
Отфильтруйте запросы по Font и обновите страницу без кэша.
Убедитесь, что WOFF2 отвечает 200, а не 404 или CORS error.
В Computed проверьте фактически отрисованное семейство.
Переключите обычный и жирный текст, оба веса должны использовать свои файлы.
Откройте страницу на телефоне и при медленной сети.

Текст виден до завершения загрузки.
Заголовки не меняют высоту заметным скачком.
Кириллица отображается во всех нужных символах.
Не загружаются неиспользуемые курсивы и веса.
При блокировке файла остаётся читаемый системный шрифт.

Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.

Собрать сайт с ИИ

Диагностика по симптому

Шрифт не меняется: проверьте путь, имя font-family и более специфичное CSS-правило. В Network 404: путь считается от URL CSS или от корня при начальном /. Кириллица стала запасной: файл не содержит нужного набора символов. Жирный текст выглядит искусственно: не подключён вес 700.

Если файл отвечает 200, но браузер пишет CORS, проверьте заголовки источника. Если текст долго невидим, уберите режим block, проверьте font-display и размер файла. Если после загрузки прыгает макет, подберите ближе запасной стек и сократите число начертаний.

По теме: Как изменить курсор на сайте: CSS, картинка и проверка

Когда лучше системный шрифт

Для административной панели, раннего MVP и страницы с медленной аудиторией фирменный шрифт может не окупать дополнительный запрос. Системный стек быстрее, привычнее и не требует лицензии на файл. Брендовый шрифт оставьте для случая, когда он действительно влияет на узнаваемость.

Производительность всего первого экрана проверяйте по плану лёгкого сайта. Русскую кодировку и переносы сверяйте с руководством по сайту на русском. Адаптивность текста проверяйте по мобильному чек-листу.

Безопасный чек-лист публикации

Сохраните прежний CSS и список файлов.
Загрузите WOFF2 и CSS на тестовый адрес.
Проверьте 200, MIME-тип, кириллицу и запасной стек.
Сравните первый экран до и после при медленной сети.
Опубликуйте и повторите Network-проверку на публичном URL.

Частые вопросы

Нужно ли подключать TTF вместе с WOFF2?

Для современных целевых браузеров обычно достаточно WOFF2. Дополнительный формат нужен только при подтверждённой поддержке старой среды.

Почему шрифт работает локально, но не на сервере?

Чаще всего отличается регистр имени файла, путь, MIME-тип или политика CORS. Проверяйте запрос в Network.

Можно ли подключить шрифт картинкой?

Нет. Текст в картинке нельзя нормально выделить, масштабировать, перевести и прочитать вспомогательными технологиями.

На воркшопе вы соберёте сайт с ИИ и настроите читаемый дизайн без лишней нагрузки.

Собрать сайт