Friday, November 24, 2017

Eliminate Render Blocking Google Fonts CSS [Fast Loading]

The Best and Easiest Way to eliminate Render Blocking Google Fonts CSS will make your Blog or Website fast to load Google Font Without Font Loader, JavaScript.
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?

No comments:

Post a Comment

We appreciate your comment. Shout here.
But don't Spam. You can put URL without Anchor tag where it is necessary to mention.