Подключение нестандартных шрифтов позволяет избежать зависимости от системных библиотек и добиться единообразного отображения текста во всех браузерах. Для этого используется директива @font-face в CSS, которая указывает путь к файлу шрифта и задаёт его характеристики.
Форматы шрифтов имеют разное назначение: WOFF и WOFF2 оптимизированы для веба, TTF и OTF обеспечивают широкую поддержку, а SVG применялся в старых браузерах. На практике достаточно WOFF2 как основного и WOFF для обратной совместимости.
Файлы шрифтов лучше хранить в отдельной папке, например /fonts/, и подключать их через относительные пути. Это упростит управление проектом и ускорит загрузку при использовании кэширования.
Подключение локального шрифта с помощью @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;
}
Файл шрифта лучше размещать в отдельной папке, например fonts/, чтобы поддерживать порядок в структуре проекта.
- Используйте
woff2как основной формат – он обеспечивает наименьший размер и быструю загрузку. - Добавляйте
woffкак запасной вариант для старых браузеров. - Для кириллических проектов проверяйте наличие нужных символов в выбранном файле.
- Если есть несколько начертаний, указывайте их отдельно с параметрами
font-weightиfont-style.
Пример подключения нескольких начертаний:
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont-Bold.woff2') format('woff2');
font-weight: 700;
}
После подключения шрифт можно использовать в стилях:
body {
font-family: 'MyFont', sans-serif;
}
Задание форматов шрифтов для разных браузеров
Поддержка шрифтов в браузерах отличается, поэтому в @font-face указывают несколько форматов. Современный стандарт – WOFF2, он обеспечивает лучшее сжатие и поддерживается в большинстве актуальных браузеров. Для совместимости с более старыми версиями следует подключать также WOFF.
TTF/OTF могут использоваться как запасной вариант, однако они имеют больший вес и не всегда корректно загружаются в старых браузерах. EOT нужен только для устаревших версий Internet Explorer. SVG ранее применялся в iOS Safari, но сегодня практически не используется.
Оптимальный порядок подключения: сначала WOFF2, затем WOFF, после чего – TTF/OTF и, при необходимости, EOT. Такой приоритет позволяет минимизировать нагрузку и сохранить доступность шрифта в разных средах.
Использование относительных и абсолютных путей к файлам
При подключении шрифтов через @font-face важно правильно указывать путь к файлам. Относительный путь определяется относительно CSS-файла. Например, если каталог fonts расположен рядом со стилями, запись будет такой:
src: url("fonts/Roboto.woff2") format("woff2");
Абсолютный путь указывает полный адрес от корня сайта или с использованием протокола. Пример обращения от корня домена:
src: url("/assets/fonts/Roboto.woff2") format("woff2");
При использовании CDN или внешних хранилищ указывают полный URL с протоколом:
src: url("https://cdn.example.com/fonts/Roboto.woff2") format("woff2");
Если проект переносится между разными окружениями (локальный сервер, тестовый, продакшен), относительные пути снижают риск ошибок при развертывании. Абсолютные пути целесообразны при централизованном хранении ресурсов или при кэшировании через CDN.
Подключение шрифтов из Google Fonts
Для использования Google Fonts достаточно добавить в раздел <head> ссылку на выбранный шрифт. Например:
<link href=»https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap» rel=»stylesheet»>
После этого в CSS можно указать:
body { font-family: ‘Roboto’, sans-serif; }
При выборе шрифта на сайте Google Fonts стоит учитывать доступные начертания (wght) и подключать только те, которые реально будут использоваться, чтобы уменьшить нагрузку на загрузку страницы.
Опция display=swap позволяет отобразить текст системным шрифтом до загрузки основного, что предотвращает пустые блоки при медленном соединении.
Рекомендуется указывать несколько запасных семейств через запятую в font-family, чтобы текст оставался читаемым даже при недоступности основного шрифта.
Настройка резервных шрифтов в font-family
Свойство font-family поддерживает перечисление нескольких шрифтов через запятую. Браузер применяет первый доступный вариант. Такой подход позволяет сохранить читаемость текста, если основной файл не загрузился или не поддерживает нужные символы.
Рекомендуется указывать сначала конкретный веб-шрифт, затем системные аналоги, и завершать список универсальной категорией: serif, sans-serif, monospace. Это гарантирует предсказуемый результат на разных устройствах.
Пример:
body {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
Если Open Sans недоступен, используется Arial, при его отсутствии – Helvetica, а в крайнем случае любое шрифтовое семейство категории sans-serif. Такой порядок обеспечивает плавный переход без заметных визуальных сдвигов.
Оптимизация загрузки через font-display
Свойство font-display управляет отображением шрифта до его полной загрузки. Оно поддерживается большинством современных браузеров и позволяет снизить визуальные сдвиги контента. Основные значения: auto, block, swap, fallback, optional.
Значение swap обеспечивает немедленное отображение текста системным шрифтом и замену его на кастомный после загрузки. Это минимизирует FOIT (Flash of Invisible Text) и улучшает восприятие страницы пользователем.
Fallback сокращает время отображения системного шрифта до 100 мс, после чего текст заменяется кастомным шрифтом, если он уже загружен. Подходит для страниц с критичным визуальным контентом.
Опция optional рекомендует браузеру загрузку шрифта только при хороших условиях сети, что снижает трафик на мобильных устройствах и ускоряет первую отрисовку текста.
Рекомендуется использовать font-display совместно с preload через <link rel="preload" as="font" crossorigin>, чтобы ускорить загрузку шрифтов и минимизировать CLS (Cumulative Layout Shift).
Пример подключения шрифта с оптимизацией:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap;
}
Вопрос-ответ:
Что такое правило @font-face и как оно работает в CSS?
Правило @font-face позволяет подключать сторонние шрифты к веб-странице. С его помощью браузер загружает указанный файл шрифта и делает его доступным для использования в стилях. Обычно прописывают имя шрифта, путь к файлу и формат. Например, можно указать несколько форматов для поддержки разных браузеров: WOFF, WOFF2, TTF или EOT.
Как правильно указать путь к шрифту в CSS?
Путь к файлу шрифта указывается в свойстве src внутри @font-face. Он может быть относительным, если шрифт хранится в том же проекте, или абсолютным, если используется URL с другого сервера. Например:
src: url(‘fonts/MyFont.woff2’) format(‘woff2’);. Важно учитывать правильное написание имени файла и расширение, чтобы браузер смог загрузить шрифт.
Можно ли использовать один шрифт на нескольких сайтах?
Да, если лицензия шрифта это разрешает. Для этого можно разместить файл на сервере и подключать его через URL, либо хранить копию шрифта отдельно для каждого сайта. Нужно проверять условия лицензии: некоторые шрифты разрешают свободное использование, а для других требуется покупка или указание авторства.
Почему шрифт не отображается после подключения через CSS?
Причин может быть несколько. Чаще всего ошибка связана с неправильным путем к файлу, отсутствием формата, который поддерживает браузер, или проблемами с лицензией. Также браузер может блокировать загрузку шрифта с внешнего сервера из-за политики безопасности. Проверка консоли разработчика помогает выявить, загружается ли файл и какие ошибки возникают.
Загрузка...
