Fonts done wrong = invisible text for 3 seconds or a layout jump. Done right, they cost almost nothing.
The optimal Google Fonts snippet
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
- preconnect starts the connection handshake early — saves ~100–300ms
- display=swap shows fallback text instantly, swaps when the font arrives (no invisible text)
- Request only the weights you use — every weight is a file. 400+600+700 is plenty
Reduce the swap-jump
body { font-family: "Inter", system-ui, Arial, sans-serif; }
/* pick fallbacks with similar metrics; size-adjust can fine-tune */Level-ups
- Variable fonts: one file, every weight —
Inter:wght@100..900 - Self-hosting (fonts on your server, preloaded) removes the third-party round-trip entirely — worth it for performance-critical sites, and required by GDPR interpretations in some regions
- Or skip downloads:
system-uistacks are free and look native