How to Self-Host Google Fonts in WordPress

Loading Google Fonts from Google’s servers creates a third-party connection that transmits visitor IP addresses. For sites serving EU visitors, this raises GDPR concerns. Self-hosting eliminates that connection entirely while giving you control over caching and delivery.

This guide covers three approaches to host fonts locally in WordPress: the native Font Library for block themes, manual implementation for classic themes, and a brief note on plugin alternatives.

Why Self-Host Google Fonts?

When visitors load your site, their browser fetches fonts from fonts.googleapis.com and fonts.gstatic.com. Each request sends their IP address to Google’s servers.

Self-hosting moves font files to your server. Benefits include:

• Privacy compliance: No third-party data transfer to document or justify
• Performance control: Set your own cache headers and use preloading
• Reliability: No dependency on external services

The performance difference between Google’s CDN and a well-configured local setup is typically minimal. The primary driver for most sites is GDPR compliance, not speed.

Block Themes: Use the Native Font Library

WordPress 6.5+ includes a Font Library that downloads and serves fonts locally. This is the simplest approach for block themes.

Steps:

1. Navigate to Appearance → Editor
2. Open Styles (top-right corner) → Typography
3. Click Manage Fonts → Install Fonts
4. Search for your font, select the weights you need, and click Install

WordPress downloads the WOFF2 files to wp-content/fonts/ and registers them in your theme’s configuration. No external connections occur after installation.

Limitations: This only works with block themes. Classic themes require manual implementation.

Classic Themes: Manual Implementation

For classic themes, you’ll download fonts and write the CSS yourself.

Download and Convert Font Files

1. Visit Google Fonts, select your font, and download
2. If your download includes TTF files, convert them to WOFF2 using google-webfonts-helper or Transfonter
3. Upload files to your theme: wp-content/themes/your-theme/fonts/

Register Fonts with CSS

Add this to your theme’s style.css or a custom stylesheet:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Key properties:

• font-display: swap: Shows fallback text immediately, then swaps when the font loads. Prevents invisible text.
• font-weight: 100 900: For variable fonts, declares the full weight range in one file.

For static fonts, create separate @font-face rules for each weight you use.

Apply the Font

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Always include system font fallbacks.

Disable Remote Loading

Check that no remote fonts load by opening DevTools (F12), going to the Network tab, filtering by Font, and reloading. Look for requests to fonts.gstatic.com.

If your theme loads Google Fonts remotely, check its settings for a disable option. Otherwise, you may need to dequeue the stylesheet in functions.php or use a plugin like Disable and Remove Google Fonts.

Plugin Alternatives

Several plugins automate local font hosting:

• OMGF (Optimize My Google Fonts): Detects and downloads fonts automatically
• Local Google Fonts: Similar functionality with subset support
• WP Rocket: Includes a one-click option in its Media settings

Plugins work well when themes or page builders load fonts in ways that are difficult to override manually. They’re not mandatory — the methods above work without them.

Best Practices

Prefer WOFF2: It offers roughly 30% better compression than WOFF and has over 97% browser support. Skip older formats unless you need IE11 support.

Use variable fonts when available: One file covers all weights, reducing HTTP requests.

Preload sparingly: Only preload fonts used above the fold:

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

Include crossorigin conditionally: Only add it if your server sends the appropriate CORS headers.

Avoid @import: It blocks rendering. Use <link> tags or @font-face instead.

Conclusion

For block themes, the WordPress Font Library handles everything — install fonts through the editor and you’re done. For classic themes, download WOFF2 files, write @font-face rules, and verify no remote connections remain.

Self-hosting gives you full control over font delivery and eliminates third-party data transfers. The implementation takes minutes, and the result is a cleaner, more privacy-conscious site.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.