Как задать свои шрифты в CSS?

Development | Amber | Комментировать запись

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

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

В этом мануале мы покажем, как использовать @font-face для загрузки шрифта на веб-страницу. Для этого мы скачаем популярный открытый шрифт, Roboto Mono. При помощи свойства font-display мы настроим отображение шрифта – это позволит нам создать лучший пользовательский интерфейс.

Требования

• Редактор кода (например nano или Visual Studio Code).
• Веб-браузер.
• Базовые навыки работы с HTML. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

1: Загрузка шрифтов и создание веб-страницы

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

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

mkdir -p ./website/fonts/

Перейдите в корневой каталог нового проекта, который называется website:

cd website

Из этого каталога мы будем запускать все остальные команды.

Теперь мы воспользуемся командой curl, чтобы загрузить шрифт Roboto Mono. Мы используем популярное приложение google-webfonts-helper, которое позволяет загружать несколько шрифтов непосредственно из сети доставки контента Google при помощи одного аккуратного GET-запроса.

Давайте загрузим два разных по стилю и толщине вида Roboto Mono, regular and 700italic.

curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf"

Обратите внимание на то, как мы указали виды шрифтов из семейства Roboto Mono, которые нам нужны. Затем мы указали необходимые форматы для каждого шрифта: ttf, woff и woff2. Формат woff2 – это самый современный формат веб-шрифтов, но woff2 все еще не поддерживается некоторыми браузерами. Поэтому мы также загрузим запасной вариант – формат woff, который имеет широкую поддержку (включая Internet Explorer 9) и формат TrueType, или ttf. В итоге мы получим отличный охват, но во время работы над CSS мы также предоставим больше альтернативных вариантов на основе стандартных шрифтов. Свойство font-display поможет управлять загрузкой шрифтов на странице в разных браузерах.

Теперь извлеките загруженные шрифты в папку ./fonts. На машинах Linux и macOS используйте следующую команду:

unzip ./fonts/fontfiles.zip -d ./fonts

Теперь изучите содержимое папки ./fonts:

ls ./fonts

Вы увидите в ней шесть новых файлов – файл .ttf, .woff и .woff2 для каждого шрифта.

Загрузив шрифты, мы можем переходить к работе с CSS и стилизации HTML-элементов.

2: Правило @font-face

Теперь мы попробуем применить загруженные шрифты с помощью свойства @font-face.

С помощью nano или другого текстового редактора создайте и откройте файл style.css:

nano style.css

Добавьте следующий код, который содержит определение правила @font-face с путями к файлам:

Давайте подробно рассмотрим этот код.

Определять правила @font-face всегда нужно в главном файле CSS. Самая простая версия правила @font-face требует свойств font-family и src. В первом блоке кода мы указываем Roboto Mono в качестве значения для свойства font-family, а в src предоставляем пути к трем файлам в разных форматах – это делается в порядке убывания приоритета.

Во втором блоке свойство font-family имеет то же значение, но тут мы указываем пути к версии 700italic. Затем мы определяем два свойства: font-weight и font-style. Эти свойства помогут нам определить, где мы хотим использовать вторую версию Roboto Mono.

В следующих двух блоках мы определяем индивидуальные стили для элементов <h1> и <p>. Обратите внимание, мы используем свойство font-family для обоих элементов, но добавляем font-weight и font-style в блок для <h1>. Благодаря этому заголовки H1 будут отображаться шрифтом Roboto Mono 700italic, а не Roboto Mono regular.

Сохраните и закройте файл.

Теперь давайте создадим небольшую HTML-страницу с тегами <h1> и <p>.

Создайте и откройте новый файл index.html:

nano index.html

Добавьте в файл следующий код, который определяет заголовок и строку текста:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>CSS @font-face</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <h1> Roboto Mono font, 700italic </h1>

  <p> Roboto Mono font, regular </p>

</body>

</html>

Сохраните и закройте файл.

Загрузите index.html в браузере. Вы увидите, что заголовок отображается шрифтом Roboto Mono 700italic, а текст абзаца – Roboto Mono regular:

Roboto Mono font, 700 italic

Roboto Mono font, regular

Теперь, когда вы знаете, как работает свойство @font-face, мы попробуем использовать font-display, чтобы настроить отображение шрифтов на странице.

3: Управление отображением шрифтов с помощью font-display

С помощью font-display мы можем точно контролировать отображение шрифтов на странице. Это может значительно улучшить пользовательский опыт.

Иногда при использовании нестандартных шрифтов пользователь может столкнуться с FOUT (вспышкой неоформленного текста – flash of unstyled text) или FOIT (вспышкой невидимого текста – flash of invisible text) при первой загрузке страницы. Некоторые браузеры предпочитают отображать текст сразу, даже если нестандартный шрифт еще не загружен. Браузер отобразит нужный шрифт после полной загрузки, но в результате пользователь столкнется с FOUT. Также бывает, что браузер на короткое время скрывает текст, если шрифт еще не загрузился – это FOIT. Если шрифт не загружается в течение определенного периода, браузер использует запасной шрифт.

Один из способов справиться с FOUT –использовать инструмент Font Style Matcher, который помогает найти резервный шрифт, максимально приближенный к пользовательскому (чтобы изменение шрифта не было таким резким). Однако для более гибкой обработки подобных проблем можно использовать свойство font-display.

Чтобы устранить проблемы с загрузкой шрифтов на странице, font-display принимает одно из 5 значений:

• auto: использует стандартное поведение браузера (которое может отличаться от браузера к браузеру).
• block: текст скрывается на короткий период и отображается после загрузки пользовательского шрифта. Считается, что это значение имеет бесконечный период подмены шрифта.
• swap: браузер не скрывает текст, а меняет шрифт на пользовательский, когда он становится доступным. Это значение также предусматривает бесконечный период подмены.
• fallback: текст скрывается на очень короткий период (это называется период блокировки шрифта), а затем у браузера есть короткий период подмены. Если пользовательский шрифт не загружается в течение периода подмены, он не загружается вообще.
• optional: на загрузку тексту дается очень короткий период блокировки шрифта (~100 мс). Если шрифт не загружается в течение этого периода блокировки, браузер использует резервный шрифт, а пользовательский шрифт после этого вообще не отображается. Однако браузер будет пытаться незаметно загрузить и кешировать пользовательский шрифт: при последующих загрузках страницы пользовательский шрифт станет доступным в кеше, а затем отобразится на странице.

Значение optional параметра font-display – хорошее решение для многих проблемных ситуаций отображения шрифтов. Давайте используем это значение его в нашем файле CSS.

Вернитесь в style.css:

nano style.css

Добавьте в файл выделенный код:

@font-face {

  font-family: 'Roboto Mono', monospace;

  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),

       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),

       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');

  font-display: optional;

}

@font-face {

  font-family: 'Roboto Mono', monospace;

  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),

       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),

       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');

  font-weight: 700;

  font-style: italic;

  font-display: optional;

}

h1, p {

  font-family: 'Roboto Mono', monospace;

}

h1 {

  font-family: 'Roboto Mono', monospace;

  font-weight: 700;

  font-style: italic;

}

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

Заключение

В этом мануале мы загрузили пользовательский шрифт и использовали свойство @font-face, чтобы добавить его на веб-страницу. Затем мы использовали свойство font-display, чтобы управлять отображением шрифта на странице. Чтобы узнать больше о font-display и связанных с ним свойствах, рекомендуем ознакомиться с документацией на Mozilla Developer Network.