Css font face: как подключить и использовать внешние шрифты на веб-странице

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

Основы работы с @font-face в CSS

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

@font-face { font-family: "Custom Font Name"; src: url("/path/to/font.woff"); }

Главное в @font-face — указать два обязательных свойства:

• font-family — название шрифта для использования в CSS;
• src — путь к файлу шрифта.

Для src нужно указывать реальные адреса файлов шрифтов на сервере. Чаще всего используются форматы: woff, woff2, otf, ttf, svg. Желательно указывать сразу несколько форматов для совместимости со старыми браузерами.

Также в src можно указывать локальные шрифты из системы пользователя при помощи функции local(). Это позволит не загружать шрифт заново, если он уже установлен у пользователя.

Подключение одного шрифта на сайте

Начнем с простого случая — подключения одного шрифта. Допустим, у нас есть файл коммерческого шрифта Raleway в формате otf, и мы хотим использовать его на сайте.

1. Конвертируем otf в woff и woff2 форматы при помощи online-конвертора.
2. Загружаем полученные файлы шрифтов на сервер в папку /fonts.
3. Подключаем Raleway через @font-face:

@font-face { font-family: 'Raleway'; src: url('/fonts/raleway.woff2') format('woff2'), url('/fonts/raleway.woff') format('woff'); }

Теперь этот шрифт можно использовать на сайте как обычный CSS-шрифт:

h1 { font-family: 'Raleway', sans-serif; }

Браузер загрузит Raleway и отобразит заголовок им. Поддержка @font-face есть во всех современных браузерах, так что можно не волноваться о кроссбраузерности.

Подключение нескольких начертаний шрифта

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

Есть два основных подхода:

1. Создать отдельный @font-face для каждого начертания;
2. В одном @font-face указать все начертания.

Первый подход более гибкий, но требует больше кода. Второй экономит код, зато менее удобен в использовании.

Рассмотрим подробнее оба варианта.

Отдельный @font-face для каждого начертания

Здесь для каждого файла шрифта мы создаем свой @font-face и даем ему уникальное имя:

@font-face { font-family: 'Raleway'; src: url('/fonts/raleway-regular.woff2') format('woff2'); } @font-face { font-family: 'Raleway Bold'; src: url('/fonts/raleway-bold.woff2') format('woff2'); } @font-face { font-family: 'Raleway Italic'; src: url('/fonts/raleway-italic.woff2') format('woff2'); }

А затем используем нужные нам начертания:

h1 { font-family: 'Raleway Bold', sans-serif; } p { font-family: 'Raleway Italic', sans-serif; }

Этот подход дает больше контроля и не загружает лишние веса шрифта.

Один @font-face для всех начертаний

В одном правиле @font-face указываем сразу все используемые файлы шрифта:

@font-face { font-family: 'Raleway'; src: url('/fonts/raleway-regular.woff2') format('woff2'), url('/fonts/raleway-italic.woff2') format('woff2'), url('/fonts/raleway-bold.woff2') format('woff2'); }

А затем для выбора начертания используем свойства font-style и font-weight:

h1 { font-family: 'Raleway'; font-weight: bold; } p { font-family: 'Raleway'; font-style: italic; }

Этот способ проще реализовать, но загружает все веса шрифта сразу.

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

Подключение нескольких шрифтов на сайте

На многих сайтах используется не один, а целая гарнитура шрифтов. К примеру, один шрифт для заголовков, другой для основного текста. Как их все подключить?

1. Подключаем каждый шрифт отдельным правилом @font-face, давая уникальные имена через font-family.
2. Указываем созданные имена шрифтов для нужных элементов.

@font-face { font-family: 'Raleway'; src: url('/fonts/raleway-regular.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; src: url('/fonts/open-sans-regular.woff2') format('woff2'); } h1 { font-family: 'Raleway', sans-serif; } p { font-family: 'Open Sans', sans-serif; }

Теперь заголовок h1 будет отображаться шрифтом Raleway, а основной текст p — шрифтом Open Sans.

Таким образом можно подключать и комбинировать множество разных шрифтов через @font-face.

Оптимизация загрузки веб-шрифтов

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

Использование формата woff2

Современный формат woff2 значительно уменьшает размер файла шрифта по сравнению с остальными форматами. Используйте его в первую очередь.

Управление отображением шрифта

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

Избегание мигания текста

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

Подход FOIT

Сперва текст невидим, после загрузки шрифта отображается. Требует указания font-display: swap.

Подход FOFT

Сначала подставляется резервный шрифт, а после загрузки нужного - он отображается. Более плавный вариант.

Другие способы оптимизации

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

Расширенные возможности @font-face

Помимо базовых опций, @font-face предоставляет и более продвинутые настройки работы с веб-шрифтами.

• Параметры font-stretch, font-style, font-weight. Эти параметры позволяют точно указать стиль, насыщенность и ширину шрифта в конкретном файле.
• Поддержка unicode-range и font-display. С unicode-range загружаются только нужные символы шрифта. А font-display управляет стратегией отображения.
• Работа со шрифтами из сервисов. Удобно подключать готовые шрифты из сервисов вроде Google Fonts, Adobe Fonts, Typekit.
• Веб-шрифты в CSS-препроцессорах. Можно использовать @font-face в SCSS, LESS, Stylus для удобства разработки.

Тенденции в использовании веб-шрифтов

Рынок веб-шрифтов активно развивается. Какие тренды стоит отметить?

Рост популярности Variable Fonts

Шрифты переменной насыщенности позволяют получить плавные переходы стилей внутри одного файла.

Новые API для работы со шрифтами

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

Популярные бесплатные шрифты

Лидеры по использованию на сайтах - Roboto, Open Sans, Lato, Montserrat.

Рост сервисов шрифтов

Упрощение подключения готовых шрифтов из сервисов без загрузки файлов.