Как подключить свой шрифт к сайту через правило font-face

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

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

Подключение состоит из двух частей: объявления шрифта и его применения. В объявлении указывают имя семейства, путь к файлу, формат и параметры начертания. В стилях элемента задают то же имя через font-family. Если файл не загрузится, браузер использует запасные гарнитуры из стека — например, Arial, sans-serif.

До редактирования CSS проверьте права на использование шрифта и подготовьте веб-версии файлов. Файл TTF или OTF может работать не во всех сценариях одинаково удобно, поэтому для сайта обычно используют оптимизированный WOFF2, а при необходимости добавляют WOFF. Убедитесь, что в гарнитуре есть нужные языки: шрифт без кириллицы не покажет русские буквы, даже если само CSS-правило написано без ошибок.

Создайте каталог для веб-шрифтов внутри проекта и скопируйте туда подготовленные файлы. Например, файл regular.woff2 можно разместить по пути assets/fonts/regular.woff2. Важно учитывать расположение CSS-файла: относительный путь считается от него, а не от корня проекта. Если таблица стилей находится в assets/css/style.css, путь к шрифту может выглядеть как ../fonts/regular.woff2.

Имена файлов лучше делать короткими и предсказуемыми: brand-regular.woff2, brand-medium.woff2, brand-bold.woff2. Не используйте в путях пробелы, случайные символы и несколько почти одинаковых названий. Чёткая структура помогает быстро найти ошибку в DevTools и не перепутать файл обычного начертания с файлом italic или variable.

Минимальное объявление содержит имя семейства, источник файла и его формат. Например: @font-face { font-family: 'Brand Sans'; src: url('../fonts/brand-regular.woff2') format('woff2'); }. Здесь Brand Sans — внутреннее имя шрифта, а не обязательно его официальное название. Это имя нужно будет повторить в свойстве font-family у текста.

Для реального проекта полезно сразу добавить font-weight, font-style и font-display. Полное описание обычного начертания может выглядеть так: @font-face { font-family: 'Brand Sans'; src: url('../fonts/brand-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }. Значение 400 соответствует обычному начертанию, normal — прямому стилю, а swap позволяет показать текст запасным шрифтом до загрузки веб-шрифта.

Каждый отдельный файл должен получить собственное правило @font-face с одинаковым font-family, но соответствующим весом или стилем. Например, для medium указывают font-weight: 500, для bold — 700, для курсива — font-style: italic. После этого браузер сможет подобрать правильный ресурс, когда в стилях появится font-weight: 500 или font-style: italic.

Если у вас есть только один файл, не создавайте фиктивные варианты 300, 600 и 800. Назначайте доступный вес честно, а в дизайне используйте его осознанно. Искусственное начертание, которое браузер строит сам, часто выглядит хуже оригинала: штрихи становятся слишком тяжёлыми, а пропорции букв — менее точными.

Для переменного шрифта подход отличается. В одном файле могут храниться диапазоны веса и других осей. В таком случае в @font-face задают диапазон, например font-weight: 300 800, а в CSS можно выбирать промежуточные значения. Используйте variable font только тогда, когда файл действительно поддерживает переменные оси и это подтверждено его характеристиками.

После объявления примените шрифт к body, отдельному блоку или компоненту. Пример: body { font-family: 'Brand Sans', Arial, sans-serif; }. Если собственная гарнитура нужна только заголовкам, используйте h1, h2, h3 { font-family: 'Brand Sans', sans-serif; }. В запасном стеке оставляйте шрифты с похожим характером и поддержкой нужных языков.

Проверьте, что название в font-family полностью совпадает с названием внутри @font-face, включая пробелы и кавычки. Ошибка в одном символе не ломает CSS целиком, но браузер не найдёт объявленное семейство и silently перейдёт к запасному шрифту. Для диагностики временно назначьте шрифт заметному заголовку и сравните форму букв с исходным файлом.

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

Свойство font-display управляет поведением текста во время загрузки. Значение swap обычно подходит для контентных страниц: сначала виден запасной шрифт, затем он заменяется собственным. Значение block может временно скрывать текст, а fallback и optional дают браузеру больше свободы. Выбирайте стратегию с учётом того, что для статьи и интерфейса читаемый текст важнее мгновенного появления фирменных форм.

Предварительная загрузка шрифта через preload может быть уместна для критически важного начертания, но использовать её следует выборочно. Если заранее загружать несколько файлов, можно занять соединение ресурсами, которые пользователь не увидит. После внедрения проверьте вкладку Network: там должен отображаться нужный файл, корректный статус ответа и отсутствие повторных загрузок.

Если шрифт разбит на языковые подмножества, браузеру нужно сообщить, какой файл содержит какие символы. Для этого применяют unicode-range. Например, отдельный файл может обслуживать латиницу, а другой — кириллицу. Такой подход уменьшает объём конкретной загрузки, но требует точной настройки диапазонов. Если диапазон задан неверно, часть букв заменится запасным шрифтом.

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

Начните с проверки консоли и сетевых запросов браузера. Ошибка 404 означает, что файл не найден по указанному пути; ошибка MIME-типа указывает на некорректный заголовок ответа сервера; блокировка CORS появляется, когда шрифт загружается с другого домена без разрешения. Если запрос успешен, но внешний вид не меняется, проверьте font-family, вес, стиль и переопределяющие CSS-правила.

Отдельно проверьте кэш. После замены файла браузер может временно использовать старую версию. Измените имя файла или добавьте версию к URL, например brand-regular.v2.woff2, если это соответствует вашей системе сборки. Не переименовывайте файл без обновления ссылки в CSS: старое правило продолжит указывать на прежний ресурс.

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

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

Чаще всего подключённый файл не содержит кириллицу или используется языковой subset только с латинскими символами. Проверьте состав глифов, наличие буквы ё и настройки unicode-range. Если кириллица есть, убедитесь, что браузер действительно загрузил нужный файл, а не получил ошибку пути или CORS.

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

Для большинства страниц с текстом практичным выбором будет swap: пользователь сразу видит содержание, а после загрузки получает фирменную гарнитуру. block может быть оправдан в редких случаях, когда краткое ожидание важнее временного показа fallback-шрифта. Решение проверяют на реальном сценарии, особенно на мобильном соединении.

Один статический файл содержит конкретное начертание и не заменяет полноценный набор regular, medium и bold. Браузер может имитировать недостающий вес, но результат не равен настоящему дизайнерскому начертанию. Исключение — variable font, в котором диапазон весов и другие оси действительно хранятся внутри одного файла.

Наиболее вероятны неправильный относительный путь, отсутствие файла в сборке, неверный MIME-тип или блокировка CORS. Откройте опубликованную страницу, найдите запрос к WOFF2 в Network и посмотрите его точный URL и статус. Локальная папка проекта не гарантирует, что файл попал в итоговый каталог деплоя.

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

Если собственного шрифта ещё нет, создайте его под задачу сайта на fontgenerator.ru, подготовьте нужные начертания и используйте получившуюся гарнитуру в своей визуальной системе.

Дата актуальности: 28 августа 2026 года.