Работа с шрифтами: @font-face, Google Fonts, переменные шрифты

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

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

@font-face {
  font-family: 'Roboto Fantasy';  /* Название шрифта для использования в CSS */
  src: url('fonts/RobotoFantasy-Regular.woff2') format('woff2'),  /* Современный формат */
       url('fonts/RobotoFantasy-Regular.woff') format('woff');    /* Фоллбэк */
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* Оптимизация загрузки */
}

💡 Совет: Всегда указывайте font-display: swap — это предотвращает "невидимый текст" во время загрузки шрифта. Браузер покажет системный шрифт, а затем заменит его на кастомный.

Форматы шрифтов:

Формат	Описание	Рекомендация
WOFF2	Самый современный и сжатый	Обязательно
WOFF	Хорошая совместимость	Рекомендуется
TTF/OTF	Старые форматы, больший вес	Только как фоллбэк

Google Fonts: шрифты в один клик

Нет времени возиться с загрузкой файлов? Google Fonts — это бесплатный сервис с сотнями качественных шрифтов. Подключение занимает 30 секунд:

<!-- В <head> вашего HTML -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

/* В CSS */
body {
  font-family: 'Montserrat', sans-serif;
}

Оптимизация Google Fonts:

Выбирайте только нужные начертания — каждый дополнительный wght увеличивает размер загружаемого файла.
Используйте &display=swap — аналогично font-display: swap в @font-face.
Локальное подключение — скачайте файлы шрифтов и используйте через @font-face для большей производительности.

Переменные шрифты: один файл — бесконечные возможности

Переменные шрифты (Variable Fonts) — это революция в веб-типографике! Один файл заменяет десятки статических начертаний, позволяя плавно изменять:

Толщину (weight)
Наклон (italic)
Ширину (width)
Оптические размеры (optical-size)

Подключение переменного шрифта:

@font-face {
  font-family: 'Inter Var';
  src: url('fonts/Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Диапазон значений */
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
  font-display: swap;
}

h1 {
  font-family: 'Inter Var', sans-serif;
  font-variation-settings: 'wght' 650, 'slnt' 10;
}

Практическое применение:

button:hover {
  font-variation-settings: 'wght' 700;  /* Плавное утолщение при наведении */
  transition: font-variation-settings 0.3s ease;
}

🚀 Производительность: Один переменный шрифт может заменить несколько обычных, уменьшая количество HTTP-запросов и общий вес страницы.

Комбинируем подходы: профессиональный стек

Создадим оптимальную систему шрифтов для проекта:

/* 1. Переменный шрифт как основа */
@font-face {
  font-family: 'Primary';
  src: url('fonts/Primary-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* 2. Google Fonts для дополнения */
<link href="https://fonts.googleapis.com/css2?family=Secondary&display=swap" rel="stylesheet">

/* 3. Кастомный декоративный шрифт */
@font-face {
  font-family: 'Decorative';
  src: url('fonts/Decorative.woff2') format('woff2');
  font-display: swap;
}

/* Применение */
body {
  font-family: 'Primary', sans-serif;
  font-variation-settings: 'wght' 400;
}

.heading {
  font-family: 'Secondary', serif;
}

.logo {
  font-family: 'Decorative', fantasy;
}

Оптимизация загрузки шрифтов

Шрифты могут блокировать рендеринг текста. Используйте эти техники:

1. Предзагрузка критических шрифтов:

<link rel="preload" href="fonts/Primary.woff2" as="font" type="font/woff2" crossorigin>

2. Локальные фоллбэки:

font-family: 'Custom Font', system-ui, -apple-system, sans-serif;

3. FOUT/FOIT контроль:

@font-face {
  font-display: swap;  /* Предпочитаем FOUT (Flash Of Unstyled Text) */
}

Теперь ваша типографика будет не только красивой, но и молниеносной! ✨