Google Fonts — набор из 1500+ бесплатных шрифтов. Inter, Roboto, Manrope украшают дизайн. Но при неправильном подключении заметно снижают скорость и создают проблему GDPR. Важно использовать правильно.
Проблема: render blocking
Стандартное подключение шлёт запрос на внешний сервер. Пока шрифт не загружен, текст не виден (FOIT) или прыгает (FOUT). Это ломает LCP и CLS.
Лучшее решение: self-hosting
Загрузите шрифт на свой сервер. Через google-webfonts-helper скачайте нужный шрифт в .woff2. Плюсы: быстрее, нет проблемы GDPR, контроль кэша у вас.
font-display: swap
В CSS: font-display: swap;. Пока шрифт грузится, показывается системный, потом заменяется. Текст никогда не исчезает.
Preload — главный шрифт
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Только нужные начертания
У Inter 9 начертаний. Не грузите все. Обычно хватает 2-3: 400, 600, 700.
Только нужные символы (subset)
Латиница, кириллица, арабский — отдельные subset. Для узбекского сайта может нужны latin + cyrillic.
Формат WOFF2
Самый современный, самый маленький. Поддерживается всеми браузерами.
Variable fonts
Все начертания в одном файле. Если нужно много начертаний, variable font меньше нескольких отдельных.
Предупреждение GDPR
В 2022 суд Германии признал прямое подключение Google Fonts нарушением GDPR (IP уходит Google). Self-hosting решает это полностью.
Проверка
PageSpeed Insights — предупреждения о шрифтах. Устраните.
Опыт Сайт.uz
Сайт.uz хостит шрифты у себя, только 2-3 начертания, WOFF2, font-display: swap.