How to Host Google Fonts Locally in WordPress

When your WordPress site loads Google Fonts from fonts.googleapis.com, every visitor's browser sends a request to Google's servers. This request includes the visitor's IP address, user agent, referrer URL, and other metadata. Google receives this data for every single page load, creating a significant privacy concern under European data protection law.

Why Google Fonts Are a GDPR Issue

In January 2022, a German court (LG Munich, case 3 O 17493/20) ruled that embedding Google Fonts via the standard external link constitutes a GDPR violation. The court found that transmitting a visitor's IP address to Google without prior consent violates Article 6(1) of the GDPR, because the website operator has no legitimate interest that outweighs the user's right to data protection. The site operator was ordered to pay damages to the affected visitor.

This ruling set a clear precedent across the EU. Since then, multiple law firms have sent mass warning letters to website operators who still load Google Fonts externally. The fix is straightforward: host the font files on your own server so that no data is transmitted to Google. This approach is fully GDPR-compliant, eliminates the legal risk, and often improves loading speed as well.

How to Download Google Fonts for Self-Hosting

The easiest way to get the right font files with the correct CSS is the Google Webfonts Helper tool by Mario Ranftl. Here is how to use it:

1. Open the Google Webfonts Helper and search for the font you need (e.g., "Open Sans", "Roboto", "Lato").
2. Select the character sets you require. For most European websites, "latin" and "latin-ext" are sufficient. Only add "cyrillic" or "greek" if your content actually uses those scripts.
3. Choose the font weights and styles you use on your site. Common selections are 400 (regular), 400 italic, 700 (bold), and 700 italic. Avoid selecting weights you do not actually use, as each one adds file size.
4. The tool generates ready-to-use @font-face CSS rules. Copy these. You can customize the file path prefix to match your server directory structure.
5. Download the zip file containing all selected font files in modern formats (woff2 and woff).

Manual Self-Hosting Step by Step

Step 1: Upload the Font Files

Create a fonts directory in your theme or child theme folder and upload the downloaded font files there:

/wp-content/themes/your-theme/fonts/
    open-sans-v40-latin-regular.woff2
    open-sans-v40-latin-regular.woff
    open-sans-v40-latin-700.woff2
    open-sans-v40-latin-700.woff

If you are using a child theme, place the fonts in the child theme directory so they survive parent theme updates.

Step 2: Add the @font-face CSS

Add the CSS generated by Google Webfonts Helper to your theme's stylesheet or a custom CSS file. Make sure to set font-display: swap so that text remains visible while the fonts load:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}

Step 3: Remove the External Google Fonts Reference

You need to prevent your theme from loading fonts from fonts.googleapis.com. This is typically done by dequeuing the style handle. The handle name varies by theme, so you may need to inspect your HTML source to find it:

add_action('wp_enqueue_scripts', function() {
    // Common handle names used by themes
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');

    // Some themes use different handles
    wp_dequeue_style('flavor-google-fonts');
    wp_deregister_style('flavor-google-fonts');

    // Divi theme
    wp_dequeue_style('divi-fonts');
    wp_deregister_style('divi-fonts');
}, 100);

The priority of 100 ensures this code runs after the theme has enqueued its styles. If the theme uses a different handle name, check your page source for a <link> tag containing fonts.googleapis.com and note the id attribute (remove the trailing -css to get the handle name).

Some themes hardcode the Google Fonts link directly in the template header instead of using wp_enqueue_style. In that case, you may need to edit the header template or use a child theme to override it.

Self-Hosting with a Plugin

If you prefer not to handle font files and CSS manually, plugins can automate the entire process:

• OMGF (Optimize My Google Fonts): automatically detects Google Fonts loaded on your site, downloads the font files to your server, generates local @font-face CSS, and removes the external Google Fonts references. It also preloads fonts for better performance and handles cache busting. This is the most popular option for this specific task.
• Asset CleanUp (Pro): in addition to general asset optimization, it can detect and locally host Google Fonts. It provides more control over which pages load which fonts, useful for sites where different sections use different typography.
• Perfmatters: includes a local Google Fonts feature alongside its other performance optimization tools. Good choice if you want a single plugin for multiple performance improvements.

Understanding font-display: swap

The font-display: swap property in your @font-face rules is important for user experience and Core Web Vitals. Without it, browsers may hide text until the font finishes loading (known as FOIT, or Flash of Invisible Text). With swap, the browser immediately displays text using a fallback system font and then replaces it once the custom font has loaded. This prevents layout shifts from being counted against your Cumulative Layout Shift (CLS) score and ensures content is readable even on slow connections.

Font Subsetting for Better Performance

If you want to go further with optimization, consider subsetting your fonts. A full "Latin Extended" font file might include characters for languages you never use on your site. Tools like fonttools (pyftsubset) or Everything Fonts Subsetter can strip out unused characters, significantly reducing file size. For example, a font file that covers all of Latin Extended might be 25KB, but a subset containing only the characters used in English and German could be under 15KB. For most sites, the character sets offered by Google Webfonts Helper are already a reasonable subset, so this step is optional.

Verifying No External Font Requests Remain

After making your changes, it is important to verify that no requests to fonts.googleapis.com or fonts.gstatic.com remain. Open your browser's Developer Tools (F12), go to the Network tab, reload the page, and filter by "font" or search for "googleapis". Check multiple pages, not just the homepage, because some themes load different fonts on different page templates.

Also check for Google Fonts loaded by plugins. Some page builders, slider plugins, or form plugins load their own Google Fonts independently of the theme. You may need to check each plugin's settings for a "disable Google Fonts" or "load fonts locally" option.

Verify with InspectWP

Run a new InspectWP scan after making your changes. The GDPR section of your report will show whether any requests to Google Fonts servers remain. InspectWP checks for connections to both fonts.googleapis.com (the CSS) and fonts.gstatic.com (the font files themselves). If all fonts are self-hosted correctly, neither domain should appear in the external resources list.