Пользовательские шрифты в CSS: подключение, форматы и применение
Пользовательские шрифты позволяют веб-разработчикам использовать нестандартные шрифты на веб-страницах, улучшая дизайн и удобочитаемость. CSS предоставляет несколько способов подключения шрифтов, включая @font-face, сервисы шрифтов (например, Google Fonts) и системные шрифты.
1. Подключение пользовательских шрифтов
Способ 1: Использование @font-face
Самый гибкий способ — подключение пользовательского шрифта через @font-face. Этот метод позволяет загружать шрифты с сервера или локально.
Пример подключения локального шрифта:
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2'),
url('/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Что здесь происходит?
font-family— задает имя шрифта, которое будет использоваться в CSS.src— указывает путь к файлам шрифта. Лучше указывать несколько форматов для кросс-браузерной поддержки.font-weightиfont-style— позволяют задать стили для определенного веса или наклона.
Способ 2: Подключение через Google Fonts
Google Fonts — удобный способ использования пользовательских шрифтов без необходимости загружать файлы вручную.
Пример подключения Google Fonts через <link>:
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
body {
font-family: 'Roboto', sans-serif;
}
Преимущества Google Fonts:
✔ Быстрая загрузка из CDN.
✔ Большая библиотека бесплатных шрифтов.
✔ Автоматическая оптимизация для браузеров.
Способ 3: Подключение через Adobe Fonts (Typekit)
Adobe Fonts (ранее Typekit) позволяет использовать премиальные шрифты.
Пример подключения Adobe Fonts:
<link> с вашим проектом в <head>:
<link rel="stylesheet" href="https://use.typekit.net/yourkitid.css">
body {
font-family: 'proxima-nova', sans-serif;
}
2. Форматы шрифтов
При подключении пользовательских шрифтов важно учитывать их форматы, так как разные браузеры поддерживают разные типы файлов.
| Формат | Описание | Поддержка |
|---|---|---|
| WOFF2 | Современный, сжатый формат | Все современные браузеры |
| WOFF | Хорошая компрессия, стандарт для веба | Все браузеры |
| TTF (TrueType) | Обычный шрифт, поддержка Windows и macOS | Некоторые браузеры |
| EOT (Embedded OpenType) | Формат для Internet Explorer | Только IE |
| SVG | Для использования на iOS (устарел) | Только старые браузеры |
Лучший вариант — использовать WOFF2 (и WOFF для совместимости).
3. Применение шрифтов к элементам
После подключения шрифта можно применять его к разным элементам.
1. Применение ко всему сайту
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
Рекомендуется указывать запасные шрифты (Arial, sans-serif) на случай, если пользовательский шрифт не загрузится.
2. Применение к определенным элементам
h1 {
font-family: 'Roboto', serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
3. Задание разных стилей одного шрифта
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont-Regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont-Bold.woff2') format('woff2');
font-weight: 700;
}
h1 {
font-family: 'MyCustomFont', sans-serif;
font-weight: 700;
}
p {
font-family: 'MyCustomFont', sans-serif;
font-weight: 400;
}
Важно: Если у шрифта есть разные начертания (Regular, Bold, Italic), лучше подключать их отдельно.
4. Советы по оптимизации пользовательских шрифтов
Используйте font-display: swap; — это ускоряет загрузку шрифта и показывает резервный шрифт, пока основной загружается.
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2');
font-display: swap;
}
Минимизируйте количество шрифтов — используйте 1-2 семейства шрифтов, иначе сайт станет медленным.
Сжимайте файлы шрифтов — WOFF2 лучше, так как он более компактный.
Используйте локальные шрифты, если они доступны:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Заключение
Пользовательские шрифты помогают сделать веб-сайт уникальным и удобочитаемым. В CSS можно подключать шрифты разными способами:
- Через
@font-face(локальные файлы). - Через Google Fonts (удобный и быстрый способ).
- Через Adobe Fonts (Typekit) для премиальных шрифтов.
Лучший формат шрифтов — WOFF2, так как он сжатый и поддерживается всеми современными браузерами. Используйте font-display: swap; для ускорения загрузки.
Выбирайте шрифты с умом, чтобы сайт выглядел стильно и загружался быстро! 🚀