How to Speed up Google Fonts loading with Display query. Website speed is one of the SEO factors of a website. This has been stated by Google SEO experts and Google itself. For this reason, speeding up the loading of a web page is very important, so that the web can compete with others, especially in search engines like Google.



Many things that affect the speed of a web page include:
  • Server
  • Page size which includes the size of HTML, CSS, JavaScript and Images.
  • Use of third party JavaScript and CSS,
  • Browser cache utilization and more

Loading Problem on Google Fonts

One of the web speed problems is the use of third-party web fonts such as Google Font.

If we test a website page on Google PageSpeed Insight, one of the problems that arise states "Ensure text remains visible during web font load". This can be corrected by adding the CSS font-display value to the web font.

But, now you don't have to bother because of the fact that Google Fonts has fixed the problem of the Google PSI score.

Yes, Google Fonts now allows you to be able to add font-display attributes by using the query on the font link you selected. In other words, you don't need to change anything on your website's CSS.


As shown above, you just need to add a display=swap query and paste the <link> tag before </head>.

For example if you choose a roboto font, then you have to paste the code as below.
<head>
. . . . . .
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
. . . . . .
</head>

Then save, and try to test Google PageSpeed insight again. You can apply this method anywhere, including Blogger and AMP.

May be useful :)

source: https://www.amp-blogger.com/2019/07/speed-up-google-fonts-loading-with.html