Self-host Google Fonts

WP Rocket 3.18 introduces the Self-host Google Fonts feature, which improves the website speed by detecting the Google Fonts styles and fonts in your pages, and hosting them locally from your own web server.

To activate this feature, you can go to the Media tab, click on the Self-host Google Fonts locally checkbox and save changes, like this:

activating self host google fonts

This article covers the feature overview and benefits, as well as other useful information.

Feature overview

After activating this feature, WP Rocket will detect Google fonts on a page, it will download a copy of them to your server, and it will modify their paths to serve them from your own domain instead of loading them from Google’s CDN.

Feature benefits

Hosting the fonts locally instead of using Google servers can help speed up your website because it reduces the dependency on this third-party service, avoiding potential problems with the network conditions.

Additionally, by having this type control over your website's fonts, you can prevent unexpected layout shifts.

Finally, by avoiding the connection and data transfer to Google Fonts servers, your site will have better GDPR compliance.

Benefits for PageSpeed/Lighthouse

In the PageSpeed test, these metrics and audits will potentially see a benefit when using Self-host Google Fonts:

How to check if Self-host Google Fonts is working

When this feature is applied, you will see a change in the Google Fonts paths.

Any Google Fonts CSS files, like this one:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300&display=swap" rel="stylesheet">

Will be stored locally in the cache folder, like this:

<link href="https://your-domain.com/wp-content/cache/fonts/1/google-fonts/css/2/f/b/1/d/3474.css" rel="stylesheet" data-wpr-hosted-gf-parameters="family=Roboto:ital,wght@0,100;0,300&display=swap">

Additionally, any Google Fonts files like this:

https://fonts.gstatic.com/s/caudex/v17/hash.woff2

Will be stored locally like this:

https://your-domain.com/wp-content/cache/fonts/1/google-fonts/fonts/s/caudex/v17/hash.woff2

Compatible markup

This feature searches for Google Fonts present in the HTML of the page, matching against Google Fonts version 1 and Google Fonts version 2.

WP Rocket can't optimize Google Fonts added from CSS stylesheets, or added later to the page dynamically.

Automatic clearing of locally hosted fonts

WP Rocket will clear the locally hosted fonts CSS, those are, the ones located in the /wp-content/cache/fonts/1/google-fonts/css/ folder, when:

The cache is cleared for the whole site.
Changing the CDN option.

And, WP Rocket will clear the locally hosted font files, these are the ones located at /wp-content/cache/fonts/1/google-fonts/fonts/ when:

Switching the theme.
Changing domain.

Manual clearing of locally hosted fonts

If needed, you can clear all the fonts and fonts CSS by clicking on the Clear and preload cache option in the WP Rocket toolbar menu.

Along with clearing and preloading the cache, WP Rocket will clear all the font files.

Self-host Google Fonts and CSS optimizations

When the Self-host Google Fonts feature is activated or deactivated, the optimized CSS of these optimizations will be also purged to reflect changes:

The Used CSS from the Remove Unused CSS option.
The minified CSS optimized by the Minify CSS files feature.

How to exclude fonts from Self-host Google Fonts

If you need to exclude a font from being hosted locally by Self-host Google Fonts, you can add to your site the following snippet:

add_filter( 'rocket_exclude_locally_host_fonts', function( $exclusions ) {
     $exclusions[] = 'your-target-font';
     return $exclusions;
});

Replace your-target-font with the real value of your font file.

For example, given this CSS file:

<link href = "https://fonts.googleapis.com</em>/css2?<em style="background-color: initial;">family=Roboto&display=swap" rel="stylesheet" id="testRobo">

To exclude it from the Self-host Google Fonts feature, you can replace your-target-font with any of the following values:

family=Roboto, the family.
testRobo, an attribute.
https://fonts.googleapis.com/css2?family=Roboto&display=swap, the URL.

You can also use the wildcards (.*) or .* to match an exclusion pattern.

Print fonts as internal CSS

By default, WP Rocket will store the font in a CSS file, but if needed, it's possible to print it as internal CSS, by adding the following snippet to your site:

add_filter( 'rocket_host_fonts_locally_inline_css', function( $flag ){
	return true;
} );

In case you need further help, you can contact WP Rocket's support.