How to Load Google Fonts Locally in WordPress (Privacy & Speed)

By default, many WordPress themes load Google Fonts directly from Google’s CDN. While this works, it can raise privacy concerns (especially under GDPR) and sometimes cause performance issues if fonts are fetched from an external domain. The solution is to host Google Fonts locally on your WordPress site. This guide shows you how to do it safely and efficiently.

Why Load Google Fonts Locally?

• Privacy compliance: Prevents user data (IP addresses) from being sent to Google servers.
• Improved speed: Fonts load faster when served from your own domain and can be cached more effectively.
• Better control: You can preload or subset fonts to optimize performance.

Step 1: Download Google Fonts

Use Google Fonts to choose the fonts you need. Once selected, download the font files (usually in .woff and .woff2 formats). Keep only the weights and subsets you actually use (e.g., 400 normal, 700 bold).

Step 2: Upload Fonts to Your Theme

Place the downloaded fonts inside your theme or child theme folder. A common structure is:

/wp-content/themes/your-child-theme/assets/fonts/roboto/

Step 3: Define @font-face in CSS

Next, register the fonts using @font-face. Add this to your child theme’s style.css or enqueue a separate CSS file:

/* Example: Roboto Regular and Bold */
@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/your-child-theme/assets/fonts/roboto/roboto-regular.woff2') format('woff2'),
       url('/wp-content/themes/your-child-theme/assets/fonts/roboto/roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/your-child-theme/assets/fonts/roboto/roboto-bold.woff2') format('woff2'),
       url('/wp-content/themes/your-child-theme/assets/fonts/roboto/roboto-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Use font-display: swap; to avoid layout shifts and improve Core Web Vitals (First Contentful Paint).

Step 4: Apply the Font in Your Theme

Update your theme styles to use the locally hosted font:

body {
  font-family: 'Roboto', Arial, sans-serif;
}

Step 5: Remove External Google Fonts

Most themes enqueue Google Fonts via wp_enqueue_style(). You need to deregister them to prevent double loading.

<?php
// functions.php
add_action( 'wp_enqueue_scripts', function () {
    // Replace 'theme-google-fonts' with your theme’s actual handle
    wp_dequeue_style( 'theme-google-fonts' );
    wp_deregister_style( 'theme-google-fonts' );
}, 20 );

Step 6 (Optional): Preload Fonts for Faster Rendering

You can preload your most important fonts in wp_head for faster delivery:

<?php
add_action( 'wp_head', function () {
    $font_url = get_stylesheet_directory_uri() . '/assets/fonts/roboto/roboto-regular.woff2';
    echo '<link rel="preload" href="' . esc_url( $font_url ) . '" as="font" type="font/woff2" crossorigin>';
}, 5 );

Plugins That Can Help

If you prefer not to handle this manually, plugins like OMGF (Optimize My Google Fonts) or Local Google Fonts can automatically download and serve fonts locally.

Conclusion

Loading Google Fonts locally in WordPress improves both performance and privacy compliance. By downloading font files, hosting them in your theme, and deregistering the external Google Fonts, you gain full control over how fonts are served on your site. For maximum performance, preload critical fonts and subset character sets to minimize file size.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.