WP Speed Tip #7 – Self-Host Fonts to Eliminate External Requests

Why It Matters

Most WordPress sites use Google Fonts by default. Here’s what happens:

• Each font = 2–3 extra external requests
• These block rendering until fonts are downloaded
• You lose Core Web Vitals points (especially on mobile)

Google Fonts are “free,” but they make your site wait.
Self-hosting = no waiting.

What’s Wrong with Using Google Fonts?

• Fonts are fetched from fonts.googleapis.com and fonts.gstatic.com
• Adds DNS lookup, TLS handshake, and 100–200ms+ delay
• CLS (Cumulative Layout Shift) increases if fallback fonts are shown first

The Fix: Self-Host Your Fonts

Option 1: Use System Fonts (Fastest)

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

Native to all major OS. No downloads. Zero delay.

Option 2: Self-Host Custom Fonts (Like Roboto, Inter, etc.)

Step-by-Step:

1. Download the font from Google Fonts
2. Use Google Webfonts Helper to:
   • Get .woff2 versions (smallest + fastest)
   • Generate @font-face CSS
3. Upload fonts to:
   /wp-content/themes/your-theme/fonts/
4. Paste this @font-face CSS into your theme’s style.css:

@font-face {
  font-family: 'Inter';
  src: url('/wp-content/themes/your-theme/fonts/inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-display: swap; is critical — it shows fallback font immediately, avoiding CLS.

5. Replace all theme font references with your custom font.

What Not to Do

• Don’t leave both Google Fonts and self-hosted fonts active
• Don’t upload .ttf or .otf — use .woff2 only

Real Impact

Before self-hosting:

• 6 external font requests
• CLS penalty
• Render delay on mobile

After:

• 0 external requests
• Instant font rendering
• Fewer layout shifts

Pro Tip:

If using GeneratePress, Blocksy, or Kadence, they all allow custom font uploads via their settings panel — no code needed.

Bookmark this tip. Next up:
“Tip #8 – Remove WooCommerce Dashboard Bloat for Faster Admin”