Шрифты: как подключить и оптимизировать

Сначала решение, потом пояснение:

<!doctype html>
<html lang="ru">
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<link rel="preload" href="/static/fonts/montserrat-v29-cyrillic_latin-regular.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
<style>
/* Это обеспечит поддержку: Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/montserrat-v29-cyrillic_latin-regular.woff2') format('woff2');
}
/* обычный текст оставим как есть */
body {
    font-family: Arial, sans-serif;
    font-size: 1.08rem;
}
/* заголовки будут шрифтом Montserrat */
H1, H2, H3, H4, H5, H6 {
    font-family: "Montserrat", Arial, sans-serif;
}
</style>
<h1>Hello world</h1>
</body>
</html>

Почему именно так

Многое написано тут: 1 - 2 - 3 - 4 но я возьму понемногу и напишу коротко.

FOIT, FOUT и FOFT

Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display.

Свойство font-display

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

auto — поведение по умолчанию, зависит от браузера.

block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.

fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Оптимальное значение — swap, его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional.

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

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

Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload:

<link rel="preload" href="/static/fonts/montserrat-v29-cyrillic_latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Также необходимо добавить тип ресурса, в данном случае — font. Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. Я буду использовать только русские и латинские символы, ничего более, поэтому благодаря проекту я перехожу на сайт и выбираю нужные:

Скачиваю и подключаю как показал в самом начале. Готово, всем удачки.