Google Fonts is a free online Google Fonts library that provides users with more than 600 different fonts to use on their blog/website. It is undeniable that thanks to Google Fonts, the interface of the blog/website becomes much more splendid, diverse and personal. However, everything has its downside. Using Google Fonts will make your blog/website load a bit slower and get a render-blocking error when testing the load speed with Google PageSpeed Insights.
The error of Render Blocking Google Fonts
Currently, there are many WordPress themes and plugins that integrate Google Fonts into the interface. And most of them are integrated directly into the header in a similar way to the example below:
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
This results in Google Fonts being preloaded with the text (content – the part required by Google PageSpeed Insights to be displayed first) and of course, it will get a render-blocking error.
Fix Eliminate Render Blocking Google Fonts
There are 2 different ways to solve this problem: delete Google Fonts or load it async.
Remove Google Fonts
If the font is not so important, but the top priority is loading speed, you should consider removing Google Fonts. In WordPress, you can do this easily with the Disable Google Fonts plugin or load speed optimization plugins like LiteSpeed Cache or Autoptimize.
For LiteSpeed Cache plugin, you go to LiteSpeed Cache => Settings => Tuning => Remove Google Fonts:
For plugin Autoptimize, you go to Settings => Autoptimize => Extra => Google Fonts => Remove Google Fonts.
Download async (async) Google Fonts
If you still want to keep Google Fonts and solve the problem above, the task you have to do will be a little more complicated.
Insert the code with the same structure below in the footer, before the tag:
Besides, you can also store Google Fonts on the host to minimize the impact of Google Fonts on web loading time, especially when the international connection has problems. For detailed instructions, please see the reference link at the beginning of this article.
For any questions and suggestions related to the Render Blocking Google Fonts fix in Google PageSpeed Insights, please feel free to post in the comment box below for answers.