<tutorialjinni.com/>

Eliminate Render Blocking Google Fonts

Posted Under: Core Web Vitals, Fonts, Google, Performance, SEO, Tutorials on Jan 26, 2021
Google fonts is the leading open-source fonts repository hosted of Google CDN. Google CDN currently hosted 1029+ Font Families available to anyone. It provides a easy to use <link> tag that is inserted in <head> tag of HTML page.

If website is tested against Google's Core Web Vitals guideline you see this message. 
Eliminate render-blocking JavaScript and CSS in above-the-fold content
This hints that Google think that this website is not optimized for visitors so it put SEO penalty on the website and ranking drops dramatically. There are several methods to load font asynchronously but they all ended up downloading more render blocking JavaScript. Best working and tested solution is as following. 
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap">
Any file or resource that browser think is critical for page loading results in render blocking the page, CSS is on of those "critical" files. Setting media property to print tells the browser that this style sheet is used for printing purpose and it is not required for page loading, so browser give it less priority and load without blocking the page. After page is loaded successfully the onload listener of JavaScript simply remove the media attribute making it a normal font file. The swap parameter of the Google Font API simply swap the font after the loading of font file.


imgae