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

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

Вариативный, или variable, шрифт — это один файл, внутри которого хранится непрерывный диапазон начертаний. В статическом семействе для толщины 400, 500 и 700 обычно нужны отдельные файлы. В вариативном файле эти значения могут быть представлены в одном ресурсе, а браузер выбирает нужный параметр во время отображения текста.

Главное преимущество такого формата — гибкое управление типографикой. Дизайнер может использовать не только стандартные значения normal и bold, но и промежуточную толщину, немного изменить ширину букв или включить оптическое масштабирование. Однако один variable-файл не всегда меньше набора статических файлов: размер зависит от количества начертаний, языковых наборов и дополнительных осей.

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

Создайте, например, папку fonts в каталоге со статическими ресурсами и положите туда файл variable-font.woff2. Путь в CSS должен соответствовать реальному расположению ресурса. Если таблица стилей находится в отдельной папке, учитывайте относительный путь от самого CSS-файла, а не от HTML-документа. На сервере также проверьте, что файл отдаётся с корректным MIME-типом и не блокируется политикой CORS при загрузке с другого поддомена.

В таблице стилей создайте описание шрифта. Базовая запись выглядит так: @font-face { font-family: 'Studio Sans'; src: url('/fonts/studio-sans.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; }. Диапазон в font-weight сообщает браузеру, какие значения толщины поддерживает файл. Если шрифт содержит только одно значение, диапазон указывать нельзя: в таком случае задают конкретное число.

Свойство font-display: swap разрешает сначала показать текст запасным шрифтом, а затем заменить его загруженным. Это уменьшает риск невидимого текста во время ожидания ресурса. Если для брендинга важнее избежать поздней замены, можно рассмотреть другие режимы, но выбор следует проверять на реальном соединении и на слабых устройствах.

После объявления семейства назначьте его нужным элементам через font-family. Например: body { font-family: 'Studio Sans', system-ui, sans-serif; }. Первым указывают подключённый шрифт, затем системные резервные варианты. Такая цепочка помогает сохранить читаемость, если файл не загрузился, временно недоступен или не содержит нужных символов.

Для стандартных осей используйте понятные CSS-свойства. Например, .title { font-weight: 680; } задаёт промежуточную толщину, если она входит в диапазон файла, а .compact { font-stretch: 90%; } управляет шириной при поддержке оси wdth. Для курсива применяют font-style: italic, если в файле есть соответствующий стиль или ось ital. Такие свойства предпочтительнее низкоуровневой настройки, потому что они лучше описывают намерение и участвуют в обычном каскаде CSS.

Когда нужно обратиться к нестандартной оси или задать несколько параметров одновременно, применяется font-variation-settings. Пример: .display { font-variation-settings: 'wght' 720, 'wdth' 92; }. Тег оси записывают четырьмя латинскими символами в одинарных кавычках. Значения должны находиться в диапазонах, предусмотренных конкретным шрифтом, иначе браузер ограничит их или проигнорирует настройку.

Обычные свойства и font-variation-settings могут конфликтовать. Если одновременно указать font-weight: 700 и font-variation-settings: 'wght' 520, итоговое поведение станет менее очевидным для поддержки проекта. Выберите один способ для каждой оси: стандартные свойства для wght, wdth, slnt и ital, а низкоуровневую запись — для нестандартных осей или точной комбинации параметров.

Откройте инструменты разработчика браузера и убедитесь, что файл не возвращает ошибку 404 или 403. Во вкладке Network можно проверить размер и время загрузки, а в панели Computed — фактическое семейство и толщину текста. Затем протестируйте заголовки, основной текст, кнопки и поля формы: разные размеры и контраст фона часто выявляют проблемы с читаемостью раньше, чем обычный просмотр страницы.

Ниже приведён компактный шаблон для шрифта с осями толщины и ширины. В нём файл подключается один раз, заголовок получает более плотное начертание, а текст использует комфортную толщину. Названия Studio Sans и пути к файлу замените на данные своего шрифта: @font-face { font-family: 'Studio Sans'; src: url('/fonts/studio-sans.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; } body { font-family: 'Studio Sans', system-ui, sans-serif; font-weight: 430; } h1, h2 { font-weight: 720; font-stretch: 92%; } .caption { font-weight: 520; font-stretch: 98%; }.

Если в файле есть оптическая ось opsz, добавьте font-optical-sizing: auto. Браузер сможет подбирать оптическое начертание в зависимости от размера текста: варианты для крупного заголовка и небольшого кегля могут отличаться по деталям. Когда требуется конкретное значение, используют font-variation-settings: 'opsz' 24, но сначала проверьте документацию или метаданные файла.

Ось wght отвечает за толщину и обычно соответствует font-weight. Ось wdth регулирует ширину знаков и связана с font-stretch. Ось slnt наклоняет начертание, а ital переключает курсивный вариант, если он предусмотрен. Ось opsz оптимизирует рисунок букв под размер текста. Дополнительные оси могут отвечать за контраст, округлость, высоту или другие особенности, но их названия и диапазоны нужно брать из описания конкретного семейства.

Не следует автоматически считать любое число допустимым значением. Например, font-weight: 950 не даст заметного результата, если файл поддерживает только диапазон 400–700. Аналогично, настройка wdth не сработает, если в шрифте отсутствует ось ширины. Визуально проверяйте крайние и промежуточные значения, чтобы найти баланс между выразительностью, плотностью строки и удобством чтения.

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

Предзагрузка через link rel='preload' может быть оправдана для шрифта, который нужен уже в первом экране, но применять её следует адресно. Если предварительно загружать все варианты, браузер начнёт конкурировать ими с критическими стилями, изображениями и скриптами. Сначала настройте font-display, кэширование и правильный формат, затем измерьте результат инструментами производительности.

Современные браузеры поддерживают variable fonts, однако сайт всё равно должен корректно работать при отключённых веб-шрифтах, блокировке загрузки или использовании старого программного обеспечения. Резервная цепочка system-ui, sans-serif или serif сохраняет структуру страницы, если основной файл недоступен. Подбирайте fallback не только по стилю, но и по ширине: сильная разница метрик вызывает скачок строк при замене шрифта.

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

Для одного вариативного файла отдельные описания обычно не нужны: диапазон толщины указывают в одном правиле. Несколько правил могут понадобиться для разных стилей, например normal и italic, или для отдельных файлов с разными наборами символов. Всегда проверяйте структуру конкретного семейства.

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

Font-weight — семантическое свойство для толщины, а font-variation-settings напрямую передаёт значения осям вариативного шрифта. Для стандартных осей предпочтительнее использовать font-weight, font-stretch и font-style. Font-variation-settings удобен для нестандартных осей и точных комбинаций, но требует знания поддерживаемых тегов.

Добавьте подходящий fallback, используйте font-display: swap и сравните метрики запасного и основного шрифта. Переносы могут измениться из-за другой ширины символов, поэтому критические заголовки нужно проверить в обоих состояниях. При необходимости настройте размер, межстрочный интервал или примените font-size-adjust, если это подходит выбранной паре.

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

Чтобы подключить вариативный шрифт на сайте через CSS, достаточно подготовить WOFF2, объявить его в @font-face, указать диапазоны осей и назначить семейство элементам. После этого проверьте кириллицу, fallback, производительность и визуальную иерархию. Если нужен собственный шрифт для бренда или проекта, создайте его на fontgenerator.ru и подготовьте веб-версию для сайта.