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

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

Файлы шрифтов бывают нескольких форматов: WOFF, WOFF2, TTF, OTF, EOT и SVG. Оптимальным для большинства браузеров считается WOFF2, так как он обеспечивает хорошее сжатие при сохранении качества. Для максимальной совместимости рекомендуется хранить шрифты в нескольких форматах и указывать их последовательно в свойстве src.

При размещении шрифтов важно учитывать пути к файлам и настройку MIME-типов на сервере. Если используется CDN или сторонний источник, следует проверять наличие заголовка Access-Control-Allow-Origin, иначе браузер может заблокировать загрузку. Для локальных подключений полезно группировать шрифты в отдельной папке и использовать относительные пути.

Также стоит ограничивать количество используемых гарнитур и начертаний, чтобы снизить нагрузку на страницу. Частая ошибка – подключение целых шрифтовых семейств при необходимости лишь нескольких начертаний. Грамотное управление шрифтами делает интерфейс быстрее и визуально последовательнее.

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

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

Базовый синтаксис:

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

Параметр font-family задаёт имя, под которым шрифт будет использоваться в стилях. В src указываются пути к файлам с поддержкой разных форматов: woff2 предпочтителен для современных браузеров, woff используется для обратной совместимости. Расширения ttf и otf лучше не подключать без необходимости, так как они занимают больше места.

Для экономии трафика и ускорения загрузки рекомендуется хранить шрифты в подкаталоге проекта, например /assets/fonts/. Относительные пути работают стабильнее, чем абсолютные, особенно при переносе проекта.

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

После подключения шрифт можно применить так:

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

Перед добавлением файлов стоит проверить лицензию – не все шрифты допускают локальное использование. Также желательно оптимизировать файлы через конвертеры вроде Font Squirrel или Transfonter, чтобы снизить их размер и ускорить загрузку.

Использование внешних шрифтов из Google Fonts

Google Fonts предоставляет бесплатную библиотеку шрифтов, которые можно подключать напрямую через интернет. Для использования выбранного шрифта нужно открыть сайт fonts.google.com, выбрать стиль и нажать кнопку “Get embed code”.

В окне подключения будет предложен фрагмент кода для вставки в раздел <head> HTML-документа. Пример:

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

После вставки ссылки можно применить шрифт в CSS с помощью свойства font-family:

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

Если требуется использовать несколько шрифтов или начертаний, можно объединить их в одной ссылке, добавив параметры через знак “&”. Например:

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

Для ускорения загрузки рекомендуется использовать параметр display=swap, который подставляет системный шрифт до загрузки основного. Это улучшает визуальное восприятие и снижает время отображения текста.

Чтобы обеспечить корректное отображение, стоит указать запасные системные шрифты. Например: font-family: 'Open Sans', Arial, sans-serif;.

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

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

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

Формат	Описание	Поддержка браузеров
WOFF2	Сжатый формат с оптимизацией под веб, минимальный размер без потери качества.	Chrome, Firefox, Edge, Safari (начиная с версии 10), Opera.
WOFF	Более старый вариант, поддерживается большинством браузеров, включая старые версии Safari и Android Browser.	Все современные браузеры и старые версии IE (начиная с 9).
TTF/OTF	Форматы TrueType и OpenType, применяются как резервные при отсутствии поддержки WOFF/WOFF2.	Поддерживаются большинством браузеров, кроме старых IE.
EOT	Формат, предназначенный для старых версий Internet Explorer (до 9).	Только IE 6–8.
SVG	Используется для шрифтов в старых браузерах iOS.	Safari до версии 5.1 на iOS.

Рекомендуется указывать шрифты в порядке приоритета, начиная с WOFF2. Ниже приведён пример корректного подключения:

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

Параметр font-display: swap; позволяет отображать системный шрифт до загрузки основного, что ускоряет отрисовку текста. При размещении файлов следует учитывать кэширование и использовать сжатие на уровне сервера (gzip или brotli) для уменьшения объёма передаваемых данных.

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

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

Основные значения:

font-display: auto; – поведение зависит от браузера и не гарантирует прогнозируемый результат.

font-display: block; – текст невидим до загрузки шрифта (до 3 секунд). Подходит, если критично точное соответствие фирменному стилю, но снижает восприятие скорости загрузки.

font-display: swap; – браузер сразу отображает системный шрифт, а после загрузки подменяет его на кастомный. Оптимально для большинства сайтов, так как исключает «мерцание» текста.

font-display: fallback; – краткий период невидимости текста (до 100 мс), затем используется резервный шрифт. Если основной успевает загрузиться – происходит замена. Подходит для медленных соединений.

font-display: optional; – браузер может вообще не загружать шрифт при низкой скорости сети. Применяется в интерфейсах, где важна мгновенная реакция.

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

1. Для текстового контента используйте swap – это повышает показатель Largest Contentful Paint и улучшает восприятие скорости.

2. Для декоративных шрифтов (заголовки, логотипы) – fallback или optional, чтобы избежать задержки при медленном соединении.

3. Проверяйте поведение на реальных устройствах через эмуляцию скорости сети в инструментах разработчика.

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

@font-face {
font-family: 'OpenSans';
src: url('OpenSans.woff2') format('woff2');
font-display: swap;
}

Грамотное использование font-display помогает сократить время рендеринга текста и поддерживать стабильное восприятие страницы без скачков при загрузке.

Подключение переменных шрифтов (variable fonts)

Переменные шрифты объединяют несколько начертаний в одном файле и позволяют управлять их параметрами через CSS. Это снижает количество подключаемых файлов и ускоряет загрузку страниц.

Для подключения используется стандартная директива @font-face. Пример подключения:

@font-face {
font-family: 'InterVariable';
src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
}

В отличие от обычных шрифтов, диапазон значений font-weight, font-stretch и font-style указывается через интервалы. Это позволяет плавно изменять насыщенность, ширину и наклон без подгрузки отдельных файлов.

Пример использования в CSS:

h1 {
font-family: 'InterVariable', sans-serif;
font-weight: 700;
}
p {
font-family: 'InterVariable', sans-serif;
font-weight: 400;
}

Для анимации параметров можно применять font-variation-settings. Например:

p:hover {
font-variation-settings: "wght" 700;
transition: font-variation-settings 0.3s ease;
}

При использовании переменных шрифтов важно указывать формат truetype-variations или woff2, так как не все браузеры одинаково обрабатывают форматы. Проверить поддержку можно на caniuse.com.

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

Резервные шрифты и каскадные семейства в font-family

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

Пример синтаксиса:

font-family: "Open Sans", "Segoe UI", Arial, sans-serif;

Здесь браузер последовательно проверяет наличие шрифтов и применяет первый найденный. Последний элемент списка – общее семейство (generic family), которое гарантирует базовую читаемость текста.

Основные каскадные семейства:

serif – шрифты с засечками (Times New Roman, Georgia);
sans-serif – без засечек (Arial, Helvetica);
monospace – фиксированная ширина символов (Courier New, Consolas);
cursive – имитация рукописного стиля (Comic Sans MS, Brush Script MT);
fantasy – декоративные варианты (Papyrus, Impact).

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

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

Правильно подобранная последовательность в font-family обеспечивает единообразие интерфейса и минимизирует различия при рендеринге текста.