Как добавить шрифты в css

Корректное подключение шрифтов в CSS напрямую влияет на визуальное восприятие сайта, читаемость текста и производительность загрузки страниц. Вместо ограниченного набора системных гарнитур, разработчики используют внешние или собственные шрифты, подключая их через @font-face, сервисы вроде Google Fonts или локальные файлы в формате WOFF2, оптимизированные под веб.

Оптимальная структура подключения включает хранение шрифтов в отдельных директориях, указание форматов WOFF и WOFF2 для кроссбраузерной поддержки, а также настройку свойств font-display для контроля отображения текста во время загрузки. Такая конфигурация снижает задержку рендеринга и предотвращает эффект «мерцания» невидимого текста.

При выборе шрифта важно учитывать лицензионные ограничения и размер файлов. Минификация и предварительная загрузка через link rel=»preload» повышают скорость отображения. А использование переменных шрифтов (variable fonts) позволяет регулировать толщину и насыщенность без подключения множества отдельных файлов, что значительно уменьшает общий вес проекта.

Как подключить локальные шрифты с помощью @font-face

Чтобы использовать локальный шрифт без загрузки из внешних источников, разместите файлы шрифта в папке проекта, например /fonts. Затем объявите правило @font-face в CSS и укажите пути к файлам форматов woff2 и woff – они обеспечивают поддержку во всех современных браузерах.

Пример подключения:

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

Свойство font-display: swap ускоряет отрисовку текста, используя системный шрифт до загрузки основного. Для разных начертаний (жирный, курсив) создавайте отдельные блоки @font-face с соответствующими параметрами font-weight и font-style.

После объявления шрифта применяйте его в стилях: body { font-family: 'Inter', sans-serif; }. Важно использовать относительные пути к файлам, чтобы обеспечить корректное подключение при переносе проекта. Оптимальный порядок форматов – сначала woff2, затем woff, так как первый имеет меньший размер и лучшую компрессию.

Подключение шрифтов из внешних источников (Google Fonts, CDN)

Внешние хранилища шрифтов позволяют подключать типографику без загрузки файлов на сервер. Наиболее популярные решения – Google Fonts и различные CDN-платформы. Они обеспечивают быструю доставку, автоматическую оптимизацию и кэширование.

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

Перейдите на Google Fonts и выберите нужный шрифт.
Сформируйте набор начертаний (например, 400, 700, italic).
Скопируйте сгенерированный тег <link> из раздела Embed code и вставьте его в секцию <head> вашего HTML-документа:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

После этого подключите шрифт в CSS:

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

Параметр display=swap обеспечивает мгновенную подмену системным шрифтом до загрузки основного, предотвращая «мерцание» текста.

2. Использование CDN

CDN (Content Delivery Network) полезны для шрифтов, не представленных в Google Fonts, например Fontshare, Adobe Fonts, jsDelivr или CDN Fonts. Подключение аналогично – через <link> или @import.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/open-sans@5.0.0/index.css">

Или через CSS:

@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-sans@5.0.0/index.css');

Рекомендации:

Используйте <link> вместо @import – быстрее загружается.
Подключайте только нужные начертания, чтобы сократить размер CSS.
Указывайте резервные шрифты в font-family (например, 'Roboto', Arial, sans-serif).
Проверяйте лицензию шрифта перед использованием на коммерческих проектах.

Настройка форматов шрифтов для разных браузеров

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

WOFF2 – оптимальный формат для современных браузеров (Chrome, Firefox, Edge, Opera). Он обеспечивает высокое сжатие без потери качества и быструю загрузку.

WOFF – используется для обратной совместимости с более старыми версиями браузеров, включая Internet Explorer 11. Пригоден как резервный вариант, если WOFF2 не поддерживается.

TTF (TrueType) – актуален для Android-браузеров старых поколений. Хотя формат объемнее, он часто необходим для кроссплатформенной поддержки.

EOT – обязательный формат для Internet Explorer 8–9. Без него шрифт в этих версиях не будет отображаться.

SVG – ранее использовался в мобильных Safari до версии iOS 5. Сегодня практически не применяется, но иногда добавляется для полной совместимости.

Пример подключения:

@font-face {
font-family: 'CustomFont';
src: url('fonts/customfont.woff2') format('woff2'),
url('fonts/customfont.woff') format('woff'),
url('fonts/customfont.ttf') format('truetype'),
url('fonts/customfont.eot') format('embedded-opentype');
font-display: swap;
}

Рекомендуется располагать форматы в порядке приоритета: WOFF2 первым, затем WOFF, TTF и EOT. Такой подход минимизирует время загрузки и исключает ошибки отображения на разных платформах.

Использование переменных шрифтов (variable fonts) в CSS

Переменные шрифты объединяют несколько начертаний в один файл, что сокращает количество HTTP-запросов и ускоряет загрузку страницы. Вместо подключения отдельных файлов для light, regular и bold используется один файл с диапазоном значений для осей изменения.

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

@font-face {
font-family: 'InterVariable';
src: url('InterVariable.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
}

Свойства font-weight, font-stretch и font-style принимают диапазоны, что позволяет управлять насыщенностью, шириной и наклоном текста плавно, а не дискретно. Например:

h1 {
font-family: 'InterVariable', sans-serif;
font-weight: 720;
}

Для анимаций переменные шрифты открывают доступ к оси wght и другим пользовательским параметрам. Используя font-variation-settings, можно изменять шрифт динамически:

@keyframes pulse {
0% { font-variation-settings: "wght" 300; }
100% { font-variation-settings: "wght" 800; }
}
h2 {
animation: pulse 2s infinite alternate;
}

Чтобы определить доступные оси, рекомендуется использовать Axis-Praxis или FontViewers. Многие современные шрифты включают оси wght (вес), wdth (ширина), slnt (наклон), ital (курсив), а также кастомные, например GRAD или opsz (оптический размер).

При использовании переменных шрифтов важно включать font-display: swap;, чтобы текст отображался до загрузки шрифта. Это сохраняет производительность и улучшает восприятие контента пользователем.

Переменные шрифты – эффективный инструмент оптимизации типографики: меньше файлов, гибкая настройка и адаптация под дизайн без потери производительности.

Оптимизация загрузки шрифтов с помощью font-display и preload

При загрузке веб-страницы шрифты могут быть источником задержки отрисовки текста. Чтобы минимизировать визуальные блокировки, используется свойство font-display и директива preload. Они позволяют управлять временем отображения текста и порядком загрузки шрифтов.

font-display определяет поведение текста во время загрузки шрифта. Это свойство задаётся внутри правила @font-face и управляет тремя стадиями рендеринга: блокирующей, переходной и активной. Оптимальный выбор зависит от баланса между скоростью отображения и визуальной стабильностью интерфейса.

Значение	Описание	Рекомендации по применению
`swap`	Сначала используется системный шрифт, затем автоматически подменяется загруженным веб-шрифтом.	Наиболее эффективен для интерфейсов, где важна скорость отображения текста.
`fallback`	Если шрифт не загружается быстро, используется запасной без последующей подмены.	Подходит для контента, где резкая смена гарнитуры нежелательна.
`optional`	Шрифт загружается только при быстрой сети; иначе отображается системный.	Используется для лёгких страниц с приоритетом скорости над дизайном.
`block`	Текст скрывается до загрузки шрифта.	Не рекомендуется – создаёт эффект «пустой страницы» при медленном соединении.

preload позволяет заранее загрузить шрифт до того, как браузер встретит его в CSS. Это сокращает время до отображения корректного шрифта. Директива добавляется в секцию <head> следующим образом:

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

Ключевые аспекты оптимизации:

Использовать preload только для критически важных шрифтов, чтобы не перегружать сеть.
Совмещать preload с font-display: swap – это даёт мгновенное отображение текста и быструю подмену после загрузки.
Убедиться, что MIME-тип и атрибут crossorigin соответствуют настройкам сервера, иначе предварительная загрузка не сработает.

Грамотная комбинация font-display и preload обеспечивает видимый текст с первых миллисекунд загрузки, снижает показатель Largest Contentful Paint (LCP) и повышает общий UX сайта.

Настройка fallback-шрифтов и системных гарнитур

Fallback-шрифты используются, когда основной шрифт недоступен. Их назначение – сохранить читаемость и сохранить общий визуальный баланс интерфейса. В CSS fallback указывается сразу после основного шрифта, через запятую:

font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

Порядок важен: браузер применяет первый доступный шрифт. Оптимальная цепочка включает кастомный шрифт, системные гарнитуры для популярных платформ и универсальное семейство (например, sans-serif).

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

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Свойства -apple-system и BlinkMacSystemFont подключают системные шрифты macOS и ChromeOS. "Segoe UI" – стандарт Windows, Roboto – Android, "Helvetica Neue" и Arial – универсальные запасные варианты.

Чтобы избежать визуальных скачков при подгрузке веб-шрифтов, применяйте font-display: swap; в объявлении @font-face. Это обеспечивает мгновенный показ fallback-шрифта и плавную замену после загрузки основного.

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