Google Fonts is a collection of 1500+ free fonts. Inter, Roboto, Manrope beautify design. But if linked incorrectly, they noticeably slow the site and create a GDPR problem. Using them correctly matters.
The problem: render blocking
The standard link sends a request to an external server. Until the font loads, text is invisible (FOIT) or jumps (FOUT). This breaks LCP and CLS.
Best solution: self-hosting
Load the font onto your own server. Use google-webfonts-helper to download the font in .woff2. Benefits: faster, no GDPR issue, cache control is yours.
font-display: swap
In CSS: font-display: swap;. While the font loads, a system font shows, then swaps. Text never disappears.
Preload โ the main font
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Only needed weights
Inter has 9 weights. Don't load all. Usually 2-3 are enough: 400, 600, 700.
Only needed characters (subset)
Latin, Cyrillic, Arabic โ separate subsets. An Uzbek site may need latin + cyrillic.
WOFF2 format
The most modern, smallest. Supported by all browsers.
Variable fonts
All weights in one file. If you need many weights, a variable font is smaller than several separate ones.
GDPR warning
In 2022 a German court ruled that linking Google Fonts directly violates GDPR (IP goes to Google). Self-hosting fully solves it.
Checking
PageSpeed Insights โ font-related warnings. Fix them.
Sayt.uz practice
Sayt.uz self-hosts fonts, only 2-3 weights, WOFF2, font-display: swap.