CSS font-family — как менять шрифты на сайте

Вы узнаете, как работает CSS-свойство font-family, как правильно составлять стек шрифтов и обеспечивать запасные варианты (fallback). В статье — рабочие примеры для body, заголовков и блоков, советы по доступности и производительности, чеклист для проверки и шаблоны кода для подключения кастомных и Google Fonts.

Зачем управлять текстом на сайте?

Текст передаёт информацию посетителю и формирует впечатление о продукте. Шрифты влияют на читабельность, тон коммуникации и восприятие бренда. Неподходящий шрифт или плохие настройки отображения быстро ухудшают UX — пользователи теряют контекст и уходят.

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

Что делает свойство font-family?

font-family указывает браузеру список шрифтов (стек). Браузер пытается применить первый доступный шрифт из стека. Если первого нет — пробует следующий, и так далее до универсальной категории (generic family), например sans-serif или serif.

Коротко:

• это список через запятую;
• имена шрифтов с пробелами берутся в кавычки;
• в конце рекомендуется указать generic family.

Синтаксис font-family — пример

selector {
  font-family: 'First Font', 'Second Font', Arial, sans-serif;
}

selector может быть тегом (body, h1), классом или id. Часто задают font-family для body, чтобы базовый текст наследовался на всю страницу.

Основные категории шрифтов

• serif — с засечками (например, Times New Roman)
• sans-serif — без засечек (например, Arial)
• monospace — моноширинные (например, Courier New)
• cursive — рукописные и декоративные
• fantasy — декоративные, редко используются для основного текста

Примеры использования font-family в реальном коде

Ниже — исправленные и готовые для копирования примеры из исходной статьи.

Пример: применяем к body

body {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

Этот стек означает: используем Franklin Gothic Medium, если он есть; иначе — Arial Narrow; иначе — Arial; иначе — любая sans-serif у пользователя.

Показанный выше пример визуально меняет шрифт с дефолтного Times New Roman на Franklin Gothic (шрифт без засечек).

Пример: шрифт для отдельного блока по id

#content-1 {
  font-family: 'Courier New', Courier, monospace;
}

Используйте id, если нужно поменять шрифт только у конкретного элемента (например, для блоков с кодом или цитат).

Пример: шрифт для заголовков h1

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

Стратегии и лучшие практики

1. Всегда указывайте стек из нескольких вариантов и завершающую generic family.
2. Ставьте в стек сначала брендовый или кастомный шрифт, затем распространённые системные аналоги и в конце generic.
3. Для основного текста выбирайте читаемые шрифты: размер, межсимвольные интервалы и высота строки критичны.
4. Для декоративных шрифтов ограничьте использование заголовками или акцентами.

Important: Проверяйте шрифты на мобильных устройствах и в разных ОС — рендеринг может отличаться.

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

Есть два распространённых способа подключить кастомный шрифт: через @font-face и через внешние сервисы (например, Google Fonts).

@font-face — локальный шрифт

@font-face {
  font-family: 'MyCustom';
  src: url('/fonts/MyCustom.woff2') format('woff2'),
       url('/fonts/MyCustom.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* ускоряет видимость текста */
}

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

Примечание о font-display: swap — он позволяет показывать текст системным шрифтом, пока кастомный не загрузится. Это уменьшает «невидимый текст» (FOIT).

Подключение через Google Fonts (пример)

HTML:

CSS:

body { font-family: 'Inter', system-ui, sans-serif; }

Совет: используйте параметр display=swap и ограничивайте количество весов (wght), чтобы уменьшить вес загрузки.

Accessibility — доступность и читабельность

• Проверьте контраст текста и фона (соответствие WCAG). Шрифт сам по себе не исправит плохой контраст.
• Для длинного текста выбирайте семейства с хорошей читабельностью (sans-serif или умеренные serif).
• Избегайте маленьких кеглей (< 14 px) для основного текста на мобильных.
• Для моноширинных блоков (код) используйте monospace-шрифты и добавляйте достаточные отступы.

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

Производительность и поведение при загрузке шрифтов

• Используйте форматы WOFF2 для современных браузеров — они компактнее.
• Минимизируйте количество подключаемых файлов шрифтов (вес и число вариаций). Каждый вес — отдельный ресурс.
• Используйте font-display: swap для улучшения метрик Core Web Vitals (LCP/CLS не напрямую, но UX заметно лучше).
• Предварительная загрузка (preload) важна для критичных шрифтов:

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

Пошаговая методика выбора шрифта (мини-методология)

1. Определите цель страницы (читабельность, бренд, эмоциональный тон).
2. Выберите основное семейство (serif/sans-serif/monospace).
3. Проверьте доступность и контраст.
4. Соберите стек: кастомный → системные аналоги → generic.
5. Добавьте font-display и оптимизируйте загрузку.
6. Тестируйте на разных браузерах, ОС и устройствах.

Когда стратегия сработает и когда нет (контрпримеры)

Работает:

• требуется единый фирменный тон на всех страницах;
• нужно обеспечить читаемость и предсказуемый fallback.

Не сработает:

• вы ожидаете одинаковый внешний вид на всех платформах (рендер шрифтов зависит от ОС и браузера);
• вы используете очень редкий декоративный шрифт для большого объёма текста — это ухудшит UX.

Чеклист для разработки и тестирования (роль: разработчик / дизайнер / QA)

• Разработчик:

  • Добавил стек шрифтов и generic family.
  • Подключил font-display и оптимизировал форматы (woff2).
  • Проверил preload для критичных шрифтов.

• Дизайнер:

  • Утвердил размеры, межстрочные интервалы и веса.
  • Проверил парные шрифты для заголовков и параграфов.

• QA:

  • Тестировал на Windows, macOS, Android, iOS.
  • Проверил поведение при отключённых сетях (offline).
  • Оценил FOUT/FOIT и время до отображения текста.

Критерии приёмки

• Стек шрифтов задан и корректно применён на ключевых страницах.
• Текст виден на всех основных устройствах в течение 1–2 секунд без «пустых» областей.
• Контраст текста соответствует требованиям доступности.
• Количество подключаемых весов и форматов минимально и обосновано.

Тестовые сценарии (acceptance)

• Открыть страницу в Chrome и Firefox на Windows: шрифт отображается (какой-либо из стека).
• Отключить интернет и загрузить страницу: система выбирает локальный шрифт-замену.
• Измерить время загрузки шрифта (network tab) и убедиться в использовании font-display: swap.
• Проверить мобильный рендер и отсутствие крупных сдвигов макета (CLS).

Таблица соответствия (короткая шпаргалка)

• Brand custom → вставить первым в стек
• System UI → system-ui, -apple-system, ‘Segoe UI’, Roboto
• Generic → serif / sans-serif / monospace

Совет по совместимости и миграции

• При смене шрифта в проде делайте A/B тесты: шрифтовая замена может влиять на количество прочитанных слов и восприятие.
• Для критичных проектов сначала обновите CSS на небольшой части страниц и проанализируйте поведение.

Ментальные модели и эвристики

• Правило 3 ступеней: кастомный → популярный системный → generic.
• Сдержанность в весах: меньше — быстрее и стабильнее.
• Компромисс читабельности vs. уникальности: для текста выбирайте читабельность, для заголовков — выраженность.

Быстрая шпаргалка (cheat sheet)

/* Базовый стек */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

/* Код */
code, pre { font-family: 'Courier New', Courier, monospace; }

/* Заголовки */
h1, h2, h3 { font-family: 'Merriweather', Georgia, 'Times New Roman', serif; }

Мера риска и способы смягчения

• Риск: долгий FOUT/FOIT → Смягчение: font-display: swap, preload, минимизация тяжёлых весов.
• Риск: неправильный рендер в системах → Смягчение: тестирование в популярных ОС и подбор системных аналогов в стеке.

Краткое резюме

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

— Конец статьи —

Вывод (коротко)

• Всегда указывайте запасные шрифты и generic family.
• Оптимизируйте загрузку и применяйте font-display.
• Тестируйте на разных устройствах и учитывайте доступность.