Optimize Google Fonts

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

  1. 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.
  2. Then from within that stylesheet, the font itself is referenced and has to be downloaded, from fonts.gstatic.com

The Optimize Google Fonts option does three things to optimize these requests.

  1. 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. 
  2. 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. 
  3. Adds the preconnect resource 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: 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.