Добавление шрифтов

Введение и проблематика

Типографика — один из ключевых элементов веб-дизайна. По умолчанию браузеры отображают текст системными шрифтами (Arial, Times New Roman, Georgia), которые выглядят одинаково скучно на всех сайтах.

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

Зачем нужны веб-шрифты?

Брендинг — шрифт является частью фирменного стиля
Читаемость — подбор оптимального шрифта для длинных текстов
Уникальность — выделение сайта среди конкурентов
Доступность — шрифты, оптимизированные для людей с дислексией

Базовая теория

Способы подключения шрифтов

Существует три основных способа добавить шрифты на веб-страницу:

Способ	Описание	Когда использовать
Google Fonts	Внешний сервис с CDN	Быстрый старт, популярные шрифты
@font-face	Локальные файлы шрифтов	Полный контроль, офлайн-работа
Adobe Fonts	Платная подписка	Премиум-шрифты, корпоративные проекты

Форматы файлов шрифтов

text

WOFF2  — современный формат, лучшее сжатие (рекомендуется)
WOFF   — хорошая поддержка, резервный вариант
TTF    — TrueType, для старых браузеров
EOT    — только для IE (устарел)
SVG    — устарел, не используется

⚠️

Для максимальной совместимости достаточно WOFF2 + WOFF. Форматы EOT и SVG больше не нужны в современной разработке.

Практические примеры

1. Подключение через Google Fonts

Самый простой способ — использовать Google Fonts. Это бесплатный сервис с CDN и огромной библиотекой шрифтов.

Шаг 1: Выберите шрифт на Google Fonts

Перейдите на fonts.google.com и выберите нужный шрифт.

Шаг 2: Получите код для подключения

Нажмите "Select" и скопируйте код из раздела "Use on the web".

Шаг 3: Добавьте в HTML

Вставьте тег <link> в секцию <head> документа.

html

<!DOCTYPE html>
<html>
<head>
  <!-- Подключение шрифта Roboto из Google Fonts -->
  <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:wght@400;700&display=swap" rel="stylesheet">
 
  <style>
    body {
      font-family: 'Roboto', sans-serif; /* Применяем шрифт */
    }
  </style>
</head>
<body>
  <h1>Заголовок шрифтом Roboto</h1>
  <p>Текст параграфа тоже использует Roboto.</p>
</body>
</html>

2. Подключение через @font-face

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

css

/* Определяем шрифт */
@font-face {
  font-family: 'MyCustomFont';        /* Имя для использования в CSS */
  src: url('/fonts/custom.woff2') format('woff2'),  /* Современные браузеры */
       url('/fonts/custom.woff') format('woff');    /* Fallback */
  font-weight: 400;                   /* Обычное начертание */
  font-style: normal;                 /* Прямой стиль */
  font-display: swap;                 /* Стратегия загрузки */
}
 
/* Жирное начертание того же шрифта */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/custom-bold.woff2') format('woff2'),
       url('/fonts/custom-bold.woff') format('woff');
  font-weight: 700;                   /* Жирное начертание */
  font-style: normal;
}
 
/* Применяем шрифт */
body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}
 
h1 {
  font-weight: 700; /* Браузер автоматически подставит bold-версию */
}

3. Стек шрифтов (Font Stack)

Всегда указывайте резервные шрифты на случай, если основной не загрузится:

css

/* Хороший font stack */
body {
  font-family:
    'Roboto',           /* Пользовательский шрифт */
    -apple-system,      /* macOS/iOS системный */
    BlinkMacSystemFont, /* Chrome на macOS */
    'Segoe UI',         /* Windows */
    'Helvetica Neue',   /* Старые macOS */
    Arial,              /* Универсальный fallback */
    sans-serif;         /* Родовой fallback */
}

Визуализация

Процесс загрузки шрифта

sequenceDiagram
    participant Browser as Браузер
    participant Server as Сервер/CDN
 
    Browser->>Browser: Парсинг HTML
    Browser->>Browser: Обнаружен @font-face
    Browser->>Server: Запрос файла шрифта
    Server-->>Browser: WOFF2 файл
    Browser->>Browser: Декодирование шрифта
    Browser->>Browser: Применение к тексту

Стратегии font-display

graph TD
    A[font-display] --> B[swap]
    A --> C[block]
    A --> D[fallback]
    A --> E[optional]
 
    B --> B1["Сразу fallback, потом swap"]
    C --> C1["Скрыть текст до загрузки"]
    D --> D1["Короткий block, потом fallback"]
    E --> E1["Только если в кеше"]

Пограничные кейсы

⚠️

FOUT (Flash of Unstyled Text) — текст сначала отображается системным шрифтом, затем "прыгает" при загрузке пользовательского.

css

/* Решение: font-display: swap */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap; /* Показываем fallback, пока грузится шрифт */
}

🚫

FOIT (Flash of Invisible Text) — текст невидим, пока шрифт не загрузится. Это хуже для UX, чем FOUT.

Оптимизация загрузки

html

<!-- Preload критичных шрифтов -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
 
<!-- Preconnect к внешним CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Продвинутые аспекты

Subset шрифтов

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

css

/* Google Fonts с subset для кириллицы */
@import url('https://fonts.googleapis.com/css2?family=Roboto&subset=cyrillic&display=swap');

Variable Fonts

Современные вариативные шрифты позволяют использовать один файл для всех начертаний:

css

/* 4 отдельных файла для разных начертаний */
@font-face {
  font-family: 'Roboto';
  src: url('roboto-light.woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Roboto';
  src: url('roboto-medium.woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'Roboto';
  src: url('roboto-bold.woff2');
  font-weight: 700;
}

Плюсы и минусы разных подходов

Подход	Плюсы	Минусы
Google Fonts	Простота, CDN, кеширование	Зависимость от внешнего сервиса
@font-face	Полный контроль, офлайн	Нужно хостить файлы самому
System fonts	Нулевая задержка	Ограниченный выбор
Variable fonts	Один файл, гибкость	Не все шрифты доступны

Вопросы интервьюера

Q: В чём разница между @font-face и font-family?

@font-face — это правило для загрузки шрифта, font-family — свойство для применения шрифта к элементу.

Q: Какой формат шрифтов лучше использовать?

WOFF2 — основной формат, WOFF — fallback. EOT и SVG устарели.

Q: Что такое font-display и зачем он нужен?

Это свойство управляет поведением текста при загрузке шрифта. swap показывает fallback сразу, block скрывает текст.

Q: Как оптимизировать загрузку шрифтов?

Использовать preload, subset, WOFF2, font-display: swap, ограничивать количество начертаний.

Q: Что такое Variable Fonts?

Это шрифты, где все начертания (веса, ширины) хранятся в одном файле. Можно использовать любой промежуточный вес.

Vue Front-end Инженер