Запоминающийся сайт немыслим без подгруженных шрифтов. Типографика в веб значит не меньше, чем в журнальной вёртске. Как подключить сторонние шрифты правильно, чтобы сайт не тормозил?
Шрифты блокируют рендеринг
Начнем с «почему». Шрифты, как правило, довольно легкие ресурсы, которые кешируются в браузере, поэтому почему важно обеспечить их быструю загрузку. Поскольку шрифты имеют высокий приоритет, они блокируют рендеринг. Если мы сможем загружать шрифты быстро и / или асинхронно, мы можем улучшить скорость сайта.
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.
Рады, если вам пригодилось какое-то из этих решений!
источник: https://reconcept.ru/blog/bystraa-zagruzka-striftov-na-sajt
