The default way to use Google Fonts is a single link tag in your HTML that loads a CSS file from fonts.googleapis.com. That CSS file then loads the actual font files from fonts.gstatic.com. Two external origins. Two DNS lookups. Two TLS handshakes. And the browser can't render text until both complete.
On a fast connection, that adds 200-400ms to your first contentful paint. On a 4G mobile connection, it can add 600ms or more. For a resource you could serve from the same origin as the rest of your page.
The four font loading problems
Render blocking. By default, browsers wait for fonts before rendering text. If the font takes 500ms to arrive, your visitors stare at a blank page for 500ms. The font-display: swap property fixes this by showing a fallback font immediately, but Google Fonts' CSS only started using swap by default in 2019, and many sites still load older versions.
FOIT and FOUT. Flash of Invisible Text happens when the browser hides text while waiting for the font. Flash of Unstyled Text happens when the browser shows the fallback and then swaps. Both are layout shifts. FOIT is worse for users. FOUT is worse for CLS scores. font-display: swap trades FOIT for FOUT, which is the right tradeoff for most sites.
Format waste. Google Fonts serves different formats based on the user agent. But if you're targeting modern browsers, WOFF2 is all you need. It has 98%+ global support and compresses 30% better than WOFF. Many self-hosted setups still include WOFF, TTF, and EOT fallbacks that nobody downloads.
Privacy. Every Google Fonts request sends the visitor's IP, user agent, and referrer to Google's servers. Austrian and German courts have ruled this violates GDPR without explicit consent. Self-hosting eliminates the legal question entirely.
What self-hosting looks like
Download the WOFF2 files from google-webfonts-helper. Put them in a /fonts/ directory. Write a local @font-face rule with font-display: swap and unicode-range subsetting if you only need Latin characters. Remove the Google Fonts link tag. Total time: 10 minutes.
The result: one fewer external origin, faster rendering, no privacy leak, and the fonts load from your CDN cache alongside everything else on your site.
What the tool checks
The Font Loading Strategy Audit scans your page for every @font-face rule and font-loading link. It checks whether you're loading from Google Fonts or self-hosting, whether font-display is set (and to what), whether you're serving WOFF2 or legacy formats, whether you're using unicode-range for subsetting, and whether you have preload hints for critical fonts.
Each finding comes with a specific recommendation and the exact CSS or HTML change needed.
If you're building client sites and want a checklist that covers fonts, images, and the other performance basics, The $20 Dollar Agency has the pre-launch section.
Fact-check notes and sources
- WOFF2 browser support at 98%+: caniuse.com/woff2
- WOFF2 compresses ~30% better than WOFF: Google Developers, WOFF2 specification
- Austrian DPA Google Fonts ruling: DSB decision of December 22, 2021
- German court ruling: LG München I, case 3 O 17493/20, January 2022
- google-webfonts-helper: gwfh.mranftl.com
Related reading
- Remote dependency audit
- Image LCP candidate and loading strategy
- Critical CSS and render-blocking resources
- CrUX field data vs lab scores
This post is informational, not legal or performance-consulting advice. Mentions of Google, GDPR, and referenced court cases are nominative fair use. No affiliation is implied.
