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

Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, чтобы получать оповещения о новых публикациях.

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

Шрифты блокируют рендеринг

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

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.

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

ОСТАВЬТЕ КОММЕНТАРИЙ ПЕРВЫМ!

РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ

Д е й с т в у й !
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!

Рассылка Reconcept, подпишитесь на наш полезный блог

Ваша заявка принята!