Font bloat! Loading too many font styles is the #1 reason for "jumpy" text — that flash where text shifts size and weight as fonts download.

Why This Matters

Each font weight/style is a separate file download:

What You Load Approximate Size
1 font, 2 weights ~50KB
2 fonts, 4 weights ~150KB
3 fonts, 6 weights ~300KB

Beyond file size:

  • Layout Shift (CLS) — text reflows after fonts load, hurting Core Web Vitals scores
  • Render blocking — fonts can block text from displaying until downloaded
  • Multiple Google Fonts requests add DNS lookups and connection overhead

How to Fix It

Step 1: Audit Your Fonts

Check what fonts your site loads:

  1. Open Developer Tools (F12) → Network tab → filter by Font
  2. Count the font files loading
  3. Identify which ones come from your theme, plugins, or Google Fonts

Step 2: Reduce to 1–2 Font Families

Most professional sites use:

  • 1 font for body text (e.g., Inter, Open Sans)
  • 1 font for headings (optional — often the same font in bold)

Within each font, limit to 2–3 weights: Regular (400), Medium (500) or Semi-bold (600), and Bold (700).

Step 3: Self-Host Your Fonts

Instead of loading from Google Fonts (which creates extra DNS lookups), self-host:

  1. Download fonts from Google Webfonts Helper
  2. Upload to your theme's fonts directory
  3. Reference them in your CSS with @font-face

Or use the OMGF (Optimize My Google Fonts) plugin to automate this.

Step 4: Add Font Display Swap

Ensure your fonts don't block text rendering. In your CSS or Google Fonts URL, use:

@font-face {
	font-family: 'Your Font';
	src: url('font.woff2') format('woff2');
	font-display: swap;
}

Or in your Google Fonts URL: &display=swap

Step 5: Check Theme and Plugin Font Loading

Some themes and plugins (especially page builders) load their own icon fonts (Font Awesome, dashicons). These add up. Disable what you don't use in:

  • Elementor → Settings → Experiments → disable unneeded icon libraries
  • Theme Customizer → Typography → reduce font selections

What to Watch For

  • System fonts (like -apple-system, BlinkMacSystemFont, "Segoe UI") are instantly available and add zero download weight. Consider them for body text.
  • Modern font formats (WOFF2) are significantly smaller than older formats. Make sure your fonts are served as WOFF2.
  • If you use preload hints for critical fonts, limit to 1–2 files — preloading too many fonts defeats the purpose.