Eliminate Render Blocking Google Fonts CSS

If you want to eliminate render blocking Google Fonts CSS, this tutorial will help you the best without paying anything.

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 eliminating render blocking this 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 CSSI didn’t get expected the 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 for free like below.

  • It has pageview 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 methods. Next I had an idea and finally, I did it. You know, it is totally free for lifetime and you can use unlimited Google Fonts, Websites.

And I am showing these 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 copying the whole link tag with URL. But you have to copy just URL of font CSS and go to the URL through the 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?