Как ускорить Google шрифты?

Когда дело доходит до разнообразия шрифтов, Google Fonts – это наилучший выбор веб-шрифтов. Да, именно здесь Google хранит креативные и красивые шрифты, которые мы можем использовать без проблем.

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

До недавнего времени у нас не было контроля над тем, как отображаются веб-шрифты или как работают резервные шрифты. Не переживайте, font-display специально придуман, чтобы спасти нас. Что это? Работает ли это с Google Fonts? Давайте разберемся.

Недавно компания Google объявила, что их служба шрифтов теперь будет поддерживать «font-display». Эта возможность решает ряд проблем с веб-производительностью.

Если у пользователя нет используемого на сайте шрифта, установленного на его устройстве, то, браузер обычно загружает указанный шрифт, используя местоположения font-face src. Eсли это не удалось или шрифт загружается медленно, то большинство браузеров реализуют тайм-аут, во время которого будет использоваться резервный шрифт (обычно шрифты по-умолчанию). Это полезный метод, но, к сожалению, каждый браузер отличается по его фактической реализации.

Например: Chrome и другие браузеры на базе Chromium и Firefox имеют трехсекундный тайм-аут, Internet Explorer имеет нулевой тайм-аут, Safari не определил тайм-аут.

1. Блокировка шрифтов. В течение этого периода, если гарнитура шрифта не загружена, любой элемент, пытающийся его использовать, должен вместо этого визуализироваться с помощью системного шрифта. Если гарнитура шрифта успешно загружается в течение периода блока, тогда грань шрифта используется нормально.
2. Замена шрифта: происходит сразу после периода блокировки шрифта. В течение этого периода, если шрифт не загружен, любой элемент, пытающийся его использовать, должен вместо этого визуализироваться с помощью системного шрифта. Если шрифт успешно загружается в течение периода подкачки, тогда шрифт используется нормально.
3. Ошибка шрифта: происходит сразу после замены шрифта. Если файл шрифта еще не загружен, когда начинается этот период, он помечается как неудачная загрузка. В противном случае, шрифт используется и отображается нормально.

Чтобы работать с «font-display», добавьте это правило @font-face, как показано ниже.

@font-face {
  font-family: "Arvo";
  font-display: auto;
  src: url("...");
}

«font-display» поддерживает следующие значения: auto | block | swap | fallback | optional.

auto : используется стратегия отображения шрифта, которую использует браузер. Большинство браузеров в настоящее время имеют стратегию по умолчанию, похожую на блокировку.

block : браузер сначала рисует «невидимый» текст, если шрифт не загружен, но меняет его шрифт сразу после загрузки. Это значение следует использовать только в том случае, если для использования страницы требуется отрисовка текста с использованием определенного шрифта.

swap : браузер немедленно рисует текст со шрифтом по-умолчанию, если файл шрифта не загружен, но меняет шрифт сразу после загрузки.

fallback : шрифт сначала отображается с задержкой, если он не загружен, но шрифт заменяется сразу после загрузки. Однако, если пройдет слишком много времени, запасной вариант будет использоваться до перезагрузки страницы. Fallback – хороший выход для таких случаев, как основной текст, где вы хотите, чтобы пользователь начал читать как можно скорее.

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

Теперь вы знаете, как ускорить отображение веб-шрифтов, пробуйте.