Как подгрузить шрифт в css

Корректное подключение шрифтов определяет внешний вид интерфейса и удобство чтения текста. В CSS можно использовать системные, веб- и локальные шрифты, комбинируя их для достижения нужного результата. Каждый способ имеет особенности, влияющие на скорость загрузки и совместимость с браузерами.

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

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

Подключение системных шрифтов через font-family

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

Пример базового объявления:

body {
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Список формируется по приоритету: браузер выбирает первый доступный шрифт. В конце рекомендуется указывать общий тип семейства – serif, sans-serif или monospace.

Serif – шрифты с засечками, например Georgia или Times New Roman.
Sans-serif – шрифты без засечек, например Arial или Roboto.
Monospace – шрифты с равной шириной символов, например Consolas или Courier New.

Для адаптивных интерфейсов стоит подбирать комбинации шрифтов, которые корректно отображаются на Windows, macOS, Android и iOS. Ниже пример кроссплатформенного набора:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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

Использование Google Fonts с помощью тега link

Google Fonts предоставляет готовые шрифты, доступные для подключения через CDN. Такой способ не требует хранения файлов на сервере и упрощает настройку. Подключение выполняется через тег <link> в разделе <head> HTML-документа.

Пример подключения шрифта Roboto с несколькими толщинами:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

После вставки ссылки можно указать шрифт в CSS:

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

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

Чтобы уменьшить количество запросов, стоит подключать только нужные наборы символов. Например, добавить параметр &subset=cyrillic при использовании кириллических шрифтов. Это сократит объём данных и ускорит загрузку страницы.

Если на сайте используется несколько шрифтов, их можно объединить в один запрос. Пример объединения Roboto и Open Sans:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

Такое подключение уменьшает количество сетевых обращений и обеспечивает более стабильное отображение текста при первой загрузке.

Подключение шрифтов из локальных файлов через @font-face

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

Минимальный пример подключения шрифта OpenSans:

@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Regular.woff2") format("woff2"),
url("fonts/OpenSans-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Свойство font-family задаёт имя, которое затем используется в стилях. В src указываются пути к файлам и форматы. Для кроссбраузерной поддержки рекомендуется включать WOFF2 и WOFF. Форматы TTF и EOT применяются только при необходимости поддержки старых браузеров.

После объявления правило используется как обычный шрифт:

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

Для корректной структуры проекта шрифты размещают в отдельной папке, например /fonts/. Пути указываются относительно файла CSS. Если используется SCSS или PostCSS, важно проверить корректность путей после компиляции.

При подключении нескольких начертаний создаётся отдельный блок @font-face для каждого веса и стиля:

@font-face {
font-family: "OpenSans";
src: url("fonts/OpenSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}

Такое разделение предотвращает конфликты при переключении толщины текста и обеспечивает предсказуемое поведение в разных браузерах.

Указание форматов шрифтов для разных браузеров

Браузеры поддерживают разные форматы шрифтов, поэтому для стабильного отображения важно указывать несколько вариантов в объявлении @font-face. Каждый формат загружается в порядке приоритета, пока не будет найден подходящий.

Наиболее распространённые форматы:

WOFF2 – современный формат с высокой степенью сжатия, поддерживается большинством актуальных браузеров.
WOFF – используется в старых версиях Chrome, Firefox и Safari, остаётся основным запасным вариантом.
TTF – поддерживается многими системами, но имеет больший размер и не оптимизирован для веба.
EOT – необходим только для старых версий Internet Explorer.
SVG – применяется на устаревших устройствах iOS, в современных проектах не используется.

Пример корректного объявления шрифта с несколькими форматами:

@font-face {
font-family: "Inter";
src: url("fonts/Inter.woff2") format("woff2"),
url("fonts/Inter.woff") format("woff"),
url("fonts/Inter.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

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

Для экономии трафика и ускорения загрузки рекомендуется конвертировать исходные файлы TTF или OTF в WOFF2 с помощью инструментов Font Squirrel, Transfonter или Google Fonts Converter. После конверсии стоит протестировать подключение во всех целевых браузерах, чтобы убедиться в корректности начертаний и кодировок.

Настройка начертаний и толщины шрифта

Свойства font-weight и font-style управляют визуальными вариациями шрифта. Правильная настройка обеспечивает единый стиль текста на всех устройствах и предотвращает искажения при смене начертания.

Параметр font-weight задаёт толщину символов. Значения могут быть числовыми – от 100 до 900 с шагом 100, либо ключевыми: normal, bold, bolder, lighter. Числовые значения предпочтительнее, если шрифт содержит несколько весов.

Пример указания различных толщин:

h1 {
font-weight: 700;
}
p {
font-weight: 400;
}

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

@font-face {
font-family: "Roboto";
src: url("fonts/Roboto-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
}

Свойство font-style управляет наклоном текста и принимает значения normal, italic или oblique. Первое используется для обычного текста, второе – для курсивного начертания, третье – для искусственного наклона.

Если шрифт не содержит курсивных начертаний, браузер создаёт псевдокурсив, что может привести к искажению. Поэтому лучше подключать отдельные файлы для italic и bold вариантов.

При работе с переменными шрифтами (variable fonts) можно использовать диапазон значений, например:

h2 {
font-variation-settings: "wght" 600;
}

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

Подключение нескольких шрифтов с запасными вариантами

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

Пример комбинирования основного и запасных шрифтов:

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

Браузер последовательно проверяет список и применяет первый найденный шрифт. Последнее значение должно быть общим семейством – serif, sans-serif или monospace. Это гарантирует, что текст всегда останется читаемым.

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

Для интерфейсов с несколькими типами контента можно использовать разные наборы шрифтов для отдельных блоков:

h1, h2 {
font-family: "Merriweather", Georgia, serif;
}
p, li {
font-family: "Inter", "Helvetica Neue", sans-serif;
}

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

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

Оптимизация загрузки шрифтов с помощью font-display

Свойство font-display в правиле @font-face определяет, как браузер отображает текст во время загрузки шрифта. Это влияет на восприятие контента и скорость рендеринга страницы. Значение задаётся внутри объявления шрифта и управляет стратегией показа.

Пример использования:

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

Параметр swap позволяет сразу показать текст системным шрифтом, а после загрузки заменить его подключённым. Это устраняет «невидимый текст» и улучшает показатели Largest Contentful Paint (LCP).

Доступные значения font-display и их особенности:

Значение	Описание поведения	Рекомендации к применению
auto	Поведение зависит от браузера, нет контроля над задержкой показа.	Используется по умолчанию, не рекомендуется для оптимизации.
block	Текст скрывается до загрузки шрифта, затем отображается с ним.	Подходит только для крупных заголовков, где важен фирменный стиль.
swap	Сначала отображается системный шрифт, после загрузки происходит замена.	Оптимальный выбор для большинства сайтов.
fallback	Кратковременно скрывает текст, затем показывает запасной шрифт.	Полезен при быстрой загрузке шрифтов с локального источника.
optional	Загрузка может быть отменена при медленном соединении.	Рекомендуется для малозначительных декоративных шрифтов.

Для внешних шрифтов, таких как Google Fonts, параметр display=swap можно добавить прямо в URL подключения. Это уменьшает визуальные задержки без изменения CSS.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Выбор стратегии должен зависеть от приоритетности шрифта и скорости сети: основные текстовые элементы лучше отображать сразу, а декоративные можно подгружать асинхронно.

Проверка корректности подключения шрифта в браузере

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

Основные способы проверки:

Открыть инструмент разработчика (F12 или Ctrl+Shift+I) и перейти на вкладку Network. Ввести фильтр .woff, .woff2 или имя файла. Если файл отображается со статусом 200, загрузка прошла успешно.
На вкладке Console проверить наличие ошибок, связанных с MIME-типом. Для шрифтов сервер должен возвращать заголовок font/woff2 или font/woff. Неверный тип приводит к блокировке ресурса.
Во вкладке Elements выделить текстовый элемент и в правой панели стилей убедиться, что свойство font-family применено. Браузер показывает реальный шрифт, который используется в данный момент.
Использовать команду Computed → Fonts (в Chrome и Edge) или Fonts (в Firefox), чтобы увидеть точное название активного шрифта и его источник.

Если файл не загружается, следует проверить:

Корректность относительного пути в @font-face – особенно при разнесении CSS и шрифтов по разным каталогам.
Совпадение регистра символов в названии файлов, поскольку серверы Linux различают прописные и строчные буквы.
Наличие всех используемых форматов: некоторые браузеры игнорируют неподдерживаемые типы.
Отсутствие кэшированных старых версий – проверить с помощью режима инкогнито или очистки кэша.

Для автоматической проверки можно воспользоваться вкладкой Coverage в Chrome DevTools – она показывает, какие шрифты реально используются на странице. Это помогает выявить лишние подключения и оптимизировать загрузку.

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

Вопрос-ответ:

Можно ли использовать один шрифт на сайте, но разные начертания и веса?

Да, для каждого веса и начертания создаётся отдельное объявление @font-face. Например, для обычного текста подключается файл Regular с font-weight: 400, а для заголовков — Bold с font-weight: 700. После этого в CSS элементам присваивается нужный вес и стиль через свойства font-weight и font-style. Такой подход позволяет браузеру правильно отображать текст без искусственного утолщения или наклона.

Что делать, если подключённый шрифт не отображается на мобильных устройствах?

Проблема обычно связана с форматом файла или путём к нему. На мобильных устройствах Safari поддерживает WOFF и WOFF2, старые iOS требуют SVG. Также стоит проверить, что в @font-face указан правильный вес и начертание шрифта. Если шрифт хранится локально, убедитесь, что путь указан относительно CSS, а регистр символов совпадает с названием файла. Иногда помогает очистка кэша или проверка через режим инкогнито.

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

Сначала в <head> вставляется тег <link> с нужным шрифтом и параметром display=swap. Затем в CSS в font-family указываются подключённый шрифт и запасные шрифты, например: font-family: "Roboto", Arial, sans-serif;. Браузер использует первый доступный шрифт, а если подключение Google Fonts не удалось, применяет запасной без нарушения структуры страницы.

Зачем указывать несколько форматов шрифта в @font-face?

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