Load Google Fonts 5x Faster

If you’re reading this post, I guess you’ve already analyzed your site through Google PageSpeed Insights and you got the error “Ensure text remains visible during web font load”

Google has several data centres all around the world and these fonts are loaded from their super fast CDN, near to your location. But Google Fonts have two major problems

Embedding a single font may look like this

What it tells browser is to download a css file that looks like this

Now browser starts download the new font file (woff2 file)

If you closely watch the URLs, one is fonts.googleapis.com and other one is fonts.gstatic.com. Check out the video below

This is the reason we got errors in Google PageSpeed Insights that says “Ensure text remains visible during web fonts load.

Source: coffeencoding.com