Способы задания шрифтов в CSS

Подключить шрифт CSS можно системным стеком, Google Fonts или собственным файлом woff2. Вы зададите семейство, подключите нужные веса и стили, настроите размер и загрузку. Рабочие примеры помогут избежать синтетического жирного начертания, невидимого текста и сдвигов в верстке.

Как задать шрифт через font-family

Свойство font-family принимает список шрифтов по приоритету. Браузер берет первый доступный вариант и переходит к следующему, если не находит предыдущий.

Ставьте в конец списка родовое семейство. Оно сохраняет общий характер текста, когда конкретная гарнитура отсутствует на устройстве пользователя.

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

code {
  font-family: "Courier New", Courier, monospace;
}

Имя без пробелов можно писать без кавычек. Название с пробелами заключайте в прямые кавычки, а варианты разделяйте запятыми.

h1 {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

Семейство serif выбирает шрифт с засечками, sans-serif – без засечек, а monospace – с одинаковой шириной символов. Значение system-ui использует интерфейсный шрифт операционной системы.

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

Системный стек не требует отдельного файла и подходит для интерфейсов. Шрифт по умолчанию зависит от браузера и операционной системы, поэтому у пользователя может отображаться не Times New Roman.

Как подключить шрифт из Google Fonts

Откройте Google Fonts, выберите семейство и оставьте только нужные веса и стили. Каждый лишний файл увеличивает объем загрузки страницы.

Подключение через link

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

URL запрашивает обычный вес 400, жирный 700 и курсив 400. Параметр display=swap показывает запасной шрифт до загрузки выбранного.

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

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

Откройте инструменты разработчика и выберите вкладку Network. Обновите страницу: в списке появятся таблица стилей и файлы шрифта, которые браузер запрашивает для текста.

Подключение через @import

Поставьте правило @import в начале CSS-файла. Браузер сначала получает основной файл стилей, затем запрашивает импортированный ресурс.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap");

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

Для небольшого прототипа такой вариант подойдет. Для готового сайта берите link, чтобы браузер раньше увидел таблицу стилей и начал загрузку.

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

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

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

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

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

@font-face {
  font-family: "SiteText";
  src: url("/fonts/site-text-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

h2 {
  font-weight: 700;
}

.note {
  font-style: italic;
}

Когда заголовок запрашивает вес 700, браузер берет файл bold. Для курсива он выбирает правило со стилем italic. Если нужного файла нет, браузер может синтезировать недостающее начертание.

Храните файл woff2 в каталоге проекта и указывайте точный путь в src. Перед публикацией проверьте лицензию гарнитуры и наличие веб-раздачи.

Вариативный шрифт

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

@font-face {
  font-family: "SiteVariable";
  src: url("/fonts/site-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "SiteVariable", sans-serif;
  font-weight: 450;
}

Диапазон работает, если файл содержит ось веса и поддерживает указанное значение. Для отдельного кириллического файла ограничьте набор символов через unicode-range.

@font-face {
  font-family: "SiteText";
  src: url("/fonts/site-text-cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

Браузер загрузит кириллический поднабор, когда странице нужны символы из указанного диапазона. Подробности описаны в справке MDN по @font-face.

Свойства шрифта: стиль, вес, размер и высота строки

Свойства группы font-* отвечают за разные параметры текста. Разделяйте их, когда сокращенная запись font скрывает нужную настройку.

font-style и font-synthesis

Значение normal оставляет прямое начертание. Значение italic выбирает курсивный вариант с особым рисунком букв, если семейство его содержит.

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

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

body {
  font-family: "SiteText", Arial, sans-serif;
  font-synthesis: none;
}

font-variant и капитель

font-variant включает типографические варианты. Для малых прописных используйте отдельное свойство font-variant-caps.

.label {
  font-variant-caps: small-caps;
}

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

font-weight

font-weight принимает значения normal, bold и числовые значения от 100 до 900. Число задает запрошенную толщину, а браузер подбирает ближайшее доступное начертание.

h1 {
  font-weight: 700;
}

small {
  font-weight: 300;
}

Если подключен только файл 400, запрос 700 может включить синтетический жирный. Добавьте файл 700 или отключите синтез.

font-size и единицы измерения

Свойство font-size задает размер текста. Начальный размер в браузерах обычно равен 16px, но пользовательские настройки могут его изменить.

Для основного текста берите rem. Эта единица зависит от размера корневого элемента и сохраняет влияние пользовательской настройки шрифта.

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

px удобен для точных деталей интерфейса, а em зависит от размера родителя. Проценты зависят от контекста, а clamp() задает минимальный, гибкий и максимальный размер.

line-height

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

body {
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  line-height: 1.1;
}

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

Сокращенная запись font

Свойство font объединяет стиль, вариант, вес, размер, высоту строки и семейство. Размер и семейство обязательны.

body {
  font: 400 1rem/1.5 "SiteText", Arial, sans-serif;
}

h1 {
  font: italic 700 2rem/1.1 "SiteText", sans-serif;
}

Перед размером идут font-style, font-variant и font-weight. После размера через косую черту указывайте line-height, последним записывайте font-family.

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

Как ускорить загрузку шрифтов

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

Значения font-display

auto оставляет решение браузеру. block дает шрифту время на загрузку, пока текст может быть невидимым.

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

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

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

preload и запасной шрифт

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

<link rel="preload" href="/fonts/site-text-regular.woff2" as="font" type="font/woff2" crossorigin>

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

Дескрипторы size-adjust, ascent-override и descent-override помогают сопоставить метрики запасного шрифта с веб-шрифтом.

@font-face {
  font-family: "SiteFallback";
  src: local("Arial");
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 22%;
}

body {
  font-family: "SiteText", "SiteFallback", sans-serif;
}

Меняйте параметры по одному и сравнивайте строки в браузере. Слишком сильная коррекция сама способна изменить ширину текста.

Ошибки при подключении шрифтов

Проблему обычно видно по внешнему виду текста или отсутствию файла в Network. Сопоставьте имя семейства, путь, вес и стиль.

• Фиктивный жирный. Страница запрашивает 700, но подключен только файл 400. Добавьте отдельное начертание или вариативное правило.
• Типографские кавычки. В CSS используйте прямые кавычки "...", а не «елочки» внутри кода.
• Забытый crossorigin. У preload шрифта укажите атрибут crossorigin, иначе предварительный запрос может не совпасть с последующей загрузкой.
• Неверный src. Найдите в Network запрос к файлу woff2. Ошибка ответа указывает на путь, имя файла или неиспользуемое правило.

После исправлений обновите страницу и сравните обычный, жирный и курсивный текст. В вычисленных стилях элемента должны отображаться выбранные семейство, вес и стиль.

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