Быстрая загрузка штрифтов на сайт, которая не тормозит сайт

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

Мы разрабатываем сайты больших и растущих компаний. Напишите нам в WhatsApp, когда вам понадобится такой сайт:

НАПИСАТЬ В WHATSAPP

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

Начнем с «почему». Шрифты, как правило, довольно легкие ресурсы, которые кешируются в браузере, поэтому почему важно обеспечить их быструю загрузку. Поскольку шрифты имеют высокий приоритет, они блокируют рендеринг. Если мы сможем загружать шрифты быстро и / или асинхронно, мы можем улучшить скорость сайта.

FOUT и FOIT

Блокировать рендеринг нельзя, поэтому у нас две стратегии на выбор для обработки загруженного шрифта:

FOUT — Flash Of Unstyled Text
Отображает текст, но запасным шрифтом. Google Fonts теперь может возвращаться с display = swap, который указывает браузеру использовать резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Если вы дотошны, то можете найти лучший запасной шрифт с помощью этого приложения: Font Style Matcher.

FOIT — Flash Of Invisible Text
Здесь текст отображается невидимым шрифтом, пока пользовательский шрифт не будет полностью загружен. Этот вариант имеет больше смысла использовать для чего-то вроде логотипа, который будет отображаться запасным шрифтом (хотя для логотипа я бы использовал SVG, но вы ведь хотите примеры!)

Уловка для быстрых шрифтов

Общий совет — предварительно подключиться к серверу шрифтов:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />

затем предварительно загрузите шрифты:

<link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
    />

Наконец, в качестве запасного варианта запросите асинхронные шрифты, установив для носителя значение «печать» для браузеров, которые не поддерживают rel="preload"(около 12% браузеров в этом 2021 году)

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
      media="print"
      onload="this.media='all'"
    />

Это работает, потому что обычная таблица стилей блокирует рендеринг, но таблице стилей печати назначается приоритет простоя. После загрузки медиафайлы ссылки применяются ко всем.

Самый быстрый способ — разместить собственные шрифты, но Google Fonts делает для вас много других вещей:

• Возвращает несколько алфавитов
• Возвращает файл css, настроенный для пользовательского агента, который его запросил.
• Если у вас несколько шрифтов, лучше всего сделать 1 запрос, чтобы это было быстрее
• Вы можете адаптировать свои запросы к определенным шрифтам и форматам (полужирный, курсив, тонкий)

API загрузки шрифтов

Есть новый CSS Font Loading API, который может запрашивать шрифты, но он не очень хорошо работает с Google Fonts, потому что вам нужен исходный URL-адрес для шрифтов, а URL-адрес Google Fonts не является источником. У Google, наряду с Typekit, есть библиотека под названием Web Font Loader , которая работает как Font Loading API, но уже с Google Fonts.

Рады, если вам пригодилось какое-то из этих решений!