Eliminate Render Blocking Google Fonts CSS [Fast Loading]

When I first use Google Font on my Blogger blog, I found it so heavy to load. After checking Google Page Speed Insight I became so depressed the result. It recommends to eliminate render blocking the Google Fonts CSS I had used. I didn't know how to eliminate this render blocking to fast loading.

For why I was looking for a solution on Google and found two ways: Using JavaScript Code and Using Adobe or others TypeKit for Google Font loading.
Eliminate Render Blocking Google Fonts CSS
Google Fonts Image
Source: Wikimedia

I didn't get expected result by using the first method but Adobe TypeKit was cool at a first sight. Though it worked well, I had given up. Because it doesn't offer full features in free like below.
  • It has page view limitation(25,000 Pageview/Month)
  • Limited Font Collection
  • Only for 1 domain
  • Only for 1 year
If you want to more features you have to upgrade. You can check the price of TypeKit.

So I didn't use those method. Next I had an idea and finally I did it. You know, it is totally free for life time and you can use unlimited Google Fonts, Websites.

And I am showing this tips have been worked.

4 Steps to eliminate the render blocking Google Fonts CSS:

1. Choose Google Font

First select the Google Font to use on your Blog or Website. You will see instructions to install Google Web font. It will suggest to copy the whole link tag with URL. But you have to copy just URL of font CSS and go to the URL through new tab.
Google Font CSS URL

2. Copy the Google Font CSS

When you will visit the URL, you will see some CSS code of font face. Select all (Ctrl + A) and Copy (Ctrl + C) the whole code.

3. Minify the copied CSS

You need to minify the copied CSS through CSS Minifier.

4. Insert the CSS code 

Copy the minified CSS and you have to integrate it just before </head> tag on your header.php (if you run your website or blog on Wordpress), index.html (for static website). For Blogger blog paste the minified CSS Blogger Dashboard → Theme → Edit HTML.

Don't forget to wrap with <style></style> tag.

You have finished to install Google Font which will load faster the previous method. It will load Google Fonts asynchronously.

You can check font loading speed from Google PageSpeed Insight and let me know have it worked this tip for you? Does it eliminate render blocking Google Fonts CSS?
Elliyas A.
I am Elliyas Ahmed, Founder of COMPROMATH. Follow me @CSElliyas in Twitter, Facebook, Instagram, LinkedIn.

Comments

Announce for Comments: Don't put spam message. We check each comment before publishing.
We allows Videos, Images, GIF in comment.
For Video - Use any YouTube Video link. Example: https://youtu.be/wG8gYDWj-mg
For Image - Use image source link that contains .jpg, jpeg, .png, jpeg, .gif . Example: https://i.imgur.com/7LFytQc.jpeg