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 three things 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.
- 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 on all pages - both cached and uncached
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:
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.