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.
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.
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:
Don't forget to wrap with
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?
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.
 |
| 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
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.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?
