Правило @font-face в CSS — стандартный способ подключить нестандартный шрифт на веб-странице: браузер посетителя по умолчанию умеет отображать только шрифты, установленные на его устройстве, а если сайт использует что-то другое, файл этого шрифта нужно предоставить браузеру напрямую. Именно это и делает @font-face — указывает браузеру, откуда скачать файл конкретного шрифта.

Что происходит технически

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2');
}

Эта короткая запись означает: когда браузеру посетителя понадобится отобразить текст шрифтом с именем CustomFont, он должен скачать файл по указанному пути прямо с сервера сайта. При каждом визите нового посетителя, у которого этот файл ещё не закеширован в браузере, происходит его загрузка — то есть файл шрифта физически передаётся тысячам разных людей, каждый раз, когда они заходят на сайт.

Почему это принципиально отличается от «использования» шрифта дизайнером

Когда дизайнер использует шрифт в Figma или Photoshop для подготовки макета, файл шрифта установлен локально на его компьютере и никуда дальше не передаётся — макет экспортируется как картинка или PDF, где текст уже «отрисован» этим шрифтом, но сам файл шрифта наружу не уходит. Подключение через @font-face — принципиально другая операция: сервер сайта становится источником распространения файла шрифта для неограниченного круга посетителей. Именно поэтому лицензии разделяют эти два сценария использования, как разобрано в статье про разницу веб- и десктопной лицензии.

Локальный шрифт как альтернатива

CSS также поддерживает правило local(), которое пытается использовать шрифт, уже установленный на устройстве посетителя, прежде чем скачивать файл с сервера. Это не решает вопрос лицензирования само по себе (браузер всё равно скачает файл через url(), если шрифта нет локально), но может снижать фактический объём раздачи файла, если целевая аудитория сайта часто уже имеет этот шрифт установленным, — на практике для нестандартных коммерческих шрифтов это редкий случай.

Что видит проверяющий или конкурент

Правило @font-face открыто видно в исходном коде страницы и в файлах стилей сайта — скрыть сам факт подключения кастомного шрифта технически невозможно без отказа от его использования вообще. Это делает нарушение лицензии на шрифт одним из самых легко проверяемых видов нарушений: достаточно посмотреть в файлы CSS сайта и найти правила @font-face, а затем проверить, есть ли у используемого шрифта веб-лицензия.

Sabsetting и минификация не скрывают шрифт

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

Практический вывод

Технически подключить любой шрифт через @font-face просто — синтаксис одинаков для любого файла независимо от его лицензионного статуса. Именно эта простота и создаёт риск: ничто технически не мешает подключить нелицензированный коммерческий шрифт точно так же, как открытый, и разница проявляется только в юридической плоскости, а не в том, заработает ли сайт визуально.