Loading Mistakes
- Missing
display=swap causes invisible text until font loads—always add it to URL - Load only weights you use:
wght@400;600;700 not the entire family—each unused weight wastes ~20KB - Missing preconnect slows load—add both:
Variable Fonts
- Inter, Roboto Flex, Montserrat, Open Sans have variable versions—one file for all weights
- Use
wght@100..900 syntax for variable—downloads single file instead of multiple - CSS for variable:
font-weight: 450 works with any value in range - Check "Variable" badge on font page—not all Google Fonts are variable
Subsetting
- Default includes latin—only add
&subset=latin-ext if you need Polish, Vietnamese, etc. - CJK fonts (Noto Sans JP, etc.) are huge—Google serves them sliced, but still heavy
- Unused subsets = wasted bytes—check what characters you actually need
Proven Pairings
Serif + Sans-Serif (classic contrast):
- Playfair Display (heading) + Source Sans Pro (body)
- Lora (heading) + Roboto (body)
- Libre Baskerville (heading) + Montserrat (body)
- Merriweather (heading) + Open Sans (body)
Sans-Serif only (modern/clean):
- Inter (both)—vary weight for hierarchy
- Montserrat (heading) + Hind (body)
- Poppins (heading) + Nunito (body)
- Work Sans (heading) + Open Sans (body)
Tech/Startup:
- Space Grotesk (heading) + Space Mono (code)
- DM Sans (heading) + DM Mono (code)
- IBM Plex Sans + IBM Plex Mono
Display fonts (headings only):
- Abril Fatface, Bebas Neue, Oswald—never use these for body text
Font Selection by Purpose
- Long-form reading: Merriweather, Lora, Source Serif Pro, Crimson Text
- UI/Interfaces: Inter, Roboto, Open Sans, Nunito Sans (tall x-height, clear at small sizes)
- Impact headings: Playfair Display, Oswald, Bebas Neue (not for body)
- Monospace: JetBrains Mono, Fira Code, Source Code Pro
Common Mistakes
- Loading 6+ weights "to be safe"—pick exactly the weights you use (usually 2-3)
- Using display fonts for paragraphs—Lobster, Pacifico, Abril Fatface are heading-only
- Two fonts too similar—Roboto + Open Sans look almost identical; just use one
- Missing font-weight in CSS—
font-weight: 600 won't work if you only loaded 400 and 700 - No fallback stack—always:
font-family: 'Inter', system-ui, sans-serif
Self-Hosting
- Self-host for GDPR compliance—Google Fonts loads from Google servers, logs IP addresses
- Use google-webfonts-helper to download files
- Same
font-display: swap needed in your @font-face - Self-hosted can be faster if your CDN is closer than Google's