Optimize Google Fonts
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
The Optimize Google Fonts option 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" />
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: