Optimize Google Fonts

The Optimize Google Fonts feature detects the Google Fonts found on your website, optimizes the requests and makes the text appear faster. In this article, you'll find more about this feature, how to deactivate it, how to customize it and some troubleshooting notes.

🚀 This feature is automatically enabled upon WP Rocket installation.

Feature overview

When you use Google Fonts on your website, this is what happens:

There is an initial HTTP request to the Google font stylesheet, hosted at fonts.googleapis.com. There is usually 1 request per font that you have chosen.
Then from within that stylesheet, the font itself is referenced and has to be downloaded, from fonts.gstatic.com

The Optimize Google Fonts feature does the following to optimize these requests.

If there are multiple requests to Google Fonts on the page, they will be combined into a single request. This will slightly reduce the number of overall HTTP requests.
Adds the display=swap parameter to the request, to satisfy PageSpeed's recommendation to ensure text remains visible during webfont load. This optimization will be applied even if there is only a single font request on your page.
Preloads and loads the Google Font file asynchronously (i.e without render blocking).
Adds the preconnect resource hint to the request to improve load time of the fonts:
<link href="https://fonts.gstatic.com" crossorigin rel="preconnect" />

This optimization is applied only on cached/optimized pages.

Heads up! Ultimately, each font you use on your site has to be downloaded by the visitor's browser. The more fonts you use, the longer this takes. This option doesn't change that. It simply provides a small optimization to the requests. You should still be careful about adding too many fonts to your site :)

Unoptimized font requests

In the below screenshot there are 2 separate requests for Google fonts (click for full-size image).

Optimized font request

Here you can see both requests have been combined into a single request with the display=swap parameter added (click for full-size image).

The preconnect hint is also added:

And the preload hint is added too:

Google Font API v2

Google Fonts recently updated its API. So it's possible that your site may use some fonts with the original API and some with v2. If this is the case, the requests will be combined into single requests per API. In other words, one request for API v1 fonts and one request for API v2 fonts.

The API version is recognizable in the URL:
Original API: https://fonts.googleapis.com/css
API v2: https://fonts.googleapis.com/css2

If you are using the new text attribute, these requests are not compatible with combining, and will remain as individual requests. For example: https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Updating from previous versions

If you updated your WP Rocket version and did not previously have the option enabled, it won't be enabled after update.

If you wish to activate it after updating, please visit the Tools tab and use the button provided:

Deactivate this option

If you wish to disable this option, you may do so with the helper plugin below. The helper plugin can be removed once activated since the option is saved in the database.

📥 Download (.zip): WP Rocket | Disable Google Font Optimization
Developers: You can find the code for this plugin on GitHub.

Changing Google fonts display attribute

To change the swap value of the "display" attribute that's being added to the URL created from the "Combine Google Fonts" feature, just use our WP Rocket Helper plugin below replacing the "swap" with one of auto, block, fallback, optional. Setting the value to "auto" will use the browser's default behavior.

📥 Download (.zip): WP Rocket | Change Google fonts display attribute
Developers: You can find the code for this plugin on GitHub.

Above's helper plugin uses the rocket_combined_google_fonts_display filter to allow setting the preferred value.

Optimize Google Fonts is not working

WP Rocket's Optimize Google Fonts feature won't work in the following cases:

When Google fonts are self-hosted, for example using a plugin like OMGF | Host Google Fonts Locally.
When Google fonts are added as an inline CSS element.