Optimize Google Fonts
🚀 From WP Rocket version 3.7 this feature is automatically enabled on new installations!
In this Article
About this optimization
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
Optimize Google Fonts 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=swapparameter 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
preconnectresource 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:
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:
If you are using the new
text attribute, these requests are not compatible with combining, and will remain as individual requests. For example:
Updating from previous versions
If you updated to version 3.7 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.
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.