Как менять шрифты на сайте с помощью CSS‑свойства font-family

Вы можете управлять стилем текста на веб‑странице с помощью CSS: менять цвет, выравнивание, размер и, конечно, сам шрифт. Свойство font-family отвечает за выбор типа шрифта. В этой статье подробно разберём синтаксис, поведенческие особенности запаса шрифтов, реальные примеры, альтернативы и проверки качества при внедрении шрифтов в проект.

Что такое роль текста на сайте

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

Определение: запасной шрифт — это следующий в списке шрифт, который использует браузер, если предыдущий недоступен.

Что такое свойство font-family

font-family — CSS‑свойство, которое задаёт список шрифтов (стек). Браузер проверяет в порядке приоритета: первый, затем второй и так далее. В конце стека обычно указывают общее семейство (generic family): serif, sans-serif, monospace, cursive, fantasy.

Правила:

• Шрифты разделяются запятыми.
• Если имя шрифта содержит пробел, берите его в одинарные или двойные кавычки.
• Последнее значение часто — общее семейство как гарантия отображения.

Синтаксис font-family

selector {
  font-family: firstFontType, 'second font type', genericFontType;
}

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

Общие семейства шрифтов

• serif — с засечками (Times, Georgia)
• sans-serif — без засечек (Arial, Helvetica)
• monospace — фиксированная ширина символов (Courier, Consolas)
• cursive — рукописные или курсивные стили
• fantasy — декоративные дисплейные шрифты

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

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

Задать шрифт для всего сайта (body)

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

В этом стеке приоритет такой: Franklin Gothic Medium → Arial Narrow → Arial → любой доступный sans-serif.

Разница заметна: Franklin Gothic относится к sans-serif, тогда как Times — к serif.

Локальная замена шрифта для блока или параграфа

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

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

Шрифт для заголовков

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

Заголовки будут в Arial, а тело документа останется в системном шрифте.

Когда простой стек шрифтов не подходит

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

Альтернативные подходы и подключение веб‑шрифтов

1. @font-face — встроенный механизм для загрузки и использования собственных файлов шрифтов.

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

body {
  font-family: 'MyBrand', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

Пояснение: font-display управляет стратегией отображения шрифта (auto, block, swap, fallback, optional). swap — быстрый, сначала показывается запасной шрифт, затем происходит замена на загруженный.

2. Сервисы веб‑шрифтов (Google Fonts, Adobe Fonts) — удобны, но добавляют внешние запросы и зависят от политики конфиденциальности.

3. Переменные шрифты (variable fonts) — один файл вместо набора весов, уменьшает общий объём, но требует поддержки браузеров и тестирования.

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

• Используйте формат WOFF2, где это возможно — он эффективнее по размеру.
• Предзагрузка критических шрифтов:
• Используйте font-display: swap или optional, чтобы избежать «невидимого текста» (FOIT).
• Уменьшайте число подключаемых весов и стилизаций (italic), бережно относитесь к латинским и кириллическим наборам.
• Кеширование через заголовки кеширования и CDN ускорит доставку.

Важно: предзагрузка (preload) экономит время, но злоупотребление preload увеличит количество одновременных запросов.

Доступность и читаемость

• Выбирайте шрифты с четкими формами символов для основного текста.
• Поддерживайте достаточный контраст фона и текста по WCAG.
• Убедитесь, что fallback-шрифт сохраняет читаемость и не ломает макет (контроль высоты строки и межсимвольного интервала).
• Для людей с дислексией подойдут специальны интерпретации шрифтов; предлагайте переключатель размера и межстрочного интервала.

Ментальные модели при выборе шрифта

• Стек как приоритетный список: думайте о шрифте как о «хотим — можем — обязаны» (brand → похожий системный → generic).
• Критичность vs эстетика: для интерфейсов приоритет — читаемость и производительность; для маркета или лендинга — визуальная уникальность.
• Размер шрифта и межстрочный интервал важнее «красивого» начертания при длинных текстах.

Практическая шпаргалка (cheat sheet)

• Базовый стек для UI: font-family: “Inter”, system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;

• Для кода: font-family: ‘SFMono-Regular’, ‘Menlo’, ‘Monaco’, ‘Roboto Mono’, ‘Courier New’, monospace;

• Для принтов/заголовков, где нужен автоматический запас: font-family: ‘Playfair Display’, Georgia, ‘Times New Roman’, serif;

• Подключение локального шрифта: используйте WOFF2 → WOFF → TTF. Добавляйте font-display.

Ролевые чек‑листы при внедрении шрифтов

• Для дизайнера:

  • Выбрать первичный и вторичный шрифты.
  • Подготовить веса и стили (400/600/700, italic при необходимости).
  • Убедиться, что выбранные шрифты читаемы на разных разрешениях.

• Для фронтенд‑разработчика:

  • Подключить шрифты через @font-face или CDN.
  • Добавить preload для критических ресурсов.
  • Настроить fallbacks и font-display.
  • Тестировать FOUT/FOIT и CLS.

• Для QA:

  • Проверить отображение на Windows, macOS, iOS и Android.
  • Проверить поведение при отключённом внешнем CDN (если используется).
  • Проверить читаемость при увеличении размера текста и при высоком контрасте.

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

• Текст читается на основных платформах без визуальных сбоев.
• Время загрузки страницы не увеличилось критично из‑за шрифтов.
• Нет значимых сдвигов макета при загрузке шрифтов (CLS в приемлемых пределах).
• Запасной шрифт корректно подменяется при отсутствии первичного.

Тестовые сценарии и контрольные точки

• Отключить сеть CDN и проверить, что сайт корректно использует запасные шрифты.
• Эмулировать медленное соединение и убедиться в отсутствии длительного невидимого текста.
• Изменить системный масштаб и проверить, что текст остаётся читаемым.
• Протестировать на популярных браузерах: Chrome, Firefox, Safari, Edge.

Когда fallback не спасёт дизайн — практические примеры

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

Примеры кода: полная конфигурация с preload

@font-face {
  font-family: 'MyBrand';
  src: url('/fonts/MyBrand.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: 'MyBrand', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

Быстрые рекомендации

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

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

Ниже ключевые идеи, которые нужно помнить:

• font-family — это стек шрифтов: браузер выбирает первый доступный.
• Для уникальности используйте @font-face или сервисы веб‑шрифтов, но учитывайте производительность.
• Добавляйте generic family и контролируйте font-display.
• Тестируйте на платформах и по критериям приёмки.

Important: всегда проверяйте доступность и читаемость текста при изменении шрифтов.

Ниже пример простой последовательности принятия решения в формате диаграммы, которая помогает выбрать стратегию подключения шрифта:

flowchart TD
  A[Нужен фирменный шрифт?] -->|Нет| B[Использовать системные шрифты]
  A -->|Да| C[Можно ли хостить шрифт локально?]
  C -->|Да| D[@font-face с preload и font-display: swap]
  C -->|Нет| E[Использовать CDN 'Google Fonts/Adobe' + font-display + fallback]
  B --> F[font-family: system-ui, ... , sans-serif]
  D --> F
  E --> F

Короткая заметка о конфиденциальности

Если вы используете внешние сервисы шрифтов (Google Fonts, Adobe), учтите, что браузер делает запросы к внешним серверам. В некоторых проектах требуется согласование с политикой конфиденциальности и локальное хостинг шрифтов предпочтительнее.

Заключение

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