How to Load Google Web Font Asynchronously?

How to use asynchronous font loading? Learn trick to load Google web Font Asynchronously And overcome from render Blocking CSS. Load Google Font with asynchronously or deferred.

Does your site affected by font loading issue? 

Google Font JS showing as render-blocking on Page speed, but you can Load Google web fonts script link asynchronously. 

And this is a Non-JS solutions to asynchronously load Google Fonts. This will help the Google fonts loading optimization and caching system.

Text is the main part of any website. Because we express our thought, opinions, ideas almost everything in written form by using text. And for writing text we use different Fonts.

Every blogging platform has its own font library which serves to their website while loads. Similarly Google Blogger has also a set of default font which loads each time with a BlogSpot site. 

But we should know what are the default Fonts of Google Blogger?
  • Arial
  • Courier
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet
  • Verdana
If you are using any font from above then this tutorial or trick is not necessary for you.  Because my main aim is to improve the web fonts loading time in Blogger template.

How to Load Google Web Font Asynchronously?

Google has a rich Font library and you can use any Font which is hosted on their site. For using Google’s web font please visit the below URL.

Why we should use Asynchronous Font?

You would see many fonts in Google Font library. But if you want to use any font then it will create a Font CSS file for your web site. Suppose you want to use Oswald or Roboto or Montserrat then you must add a Font URL from Google font library. And this Font URL affects the Blog loading speed. Because Font file contain small property which needs small data to load. For this reason our site become little slower.

When a Font URL from Google Font library loads on a site then that Font file serve as synchronous script. For this reason this affects loading speed. So in this tutorial I will show you how to load Google Fonts or any other Fonts Asynchronously.

google page speed inside

In addition, Font file is a render blocking CSS which always loads above the fold of a template site. So we must use Asynchronous Font for improving our website loading speed.

How to make Synchronous Font Asynchronous?

This is the main part of this tutorial. This is not possible to use Asynchronous Font directly because Google’s Font is still serving synchronous way and it is also treating as render blocking CSS. But we can turn it into Asynchronous form, to do this just follow the below steps.

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click on -> Theme -> Edit HTML->

Step #3: Now find the Font file like below

<link href='' rel='stylesheet' type='text/css'/>
Your Blogger template may contain different Font. For example purpose I have used Oswald Font. So search only then you will find your Font URL.

Step #4: After finding the Font please move it in a text editor like notepad.

Step #5: Now copy the script from below and Paste it above/before closing head </head> of your site.

<script type='text/javascript'>
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { = n || "all" }) }


  • Please replace the text PASTE YOUR FONT URL HERE with your Google Font file from text editor (Notepad).
Step #6: Finally click Save template button from the top of the screen.

In many Blogger template using multiple template and in this case you can use below script.

// <! [CDATA [ 
function loadCSS (e, t, n) { "use strict"; var i = window.document.createElement ( "links"); var o = t || window.document.getElementsByTagName ( "script") [0]; i.rel = "stylesheet"; i.href = e; = "only x"; o.parentNode.insertBefore (i, o); setTimeout (function () { = n || "all"})} 


  • Please replace the text PASTE FONT1 URL HERE, PASTE FONT2 URL HERE and PASTE FONT3 URL HERE with your Google Font file from text editor (Notepad). 
  • If you are using 4 Font file then just add an extra line loadCSS ("PASTE FONT4 URL HERE"); in above script.
This is really simple. After adding the Asynchronous Font script first check your Site that Fonts are loading perfectly or not? If everything is loading smoothly then for checking render blocking CSS file please visit Google page speed inside to test your Blog and see the test result.
Now your Font file is not listed as render blocking CSS. Now your site will load faster than before and also it won’t block page rendering process while loads on browser.  I hope you would understand the process. And able to make your Blog smoother and faster than before.
Unknown says: 2/09/2016

Brother, I've seen a new look of your site. Your post title is used as uppercase. If I want to add this fature then what will I do for adding this fature like you?

BloggerSpice says: ADMIN 2/09/2016

Please find the below line

.item,.static_page,.error_page,.error-custom h2

now add text-transform:uppercase; after second bracket. But your text size will increase. It will look odd. so decrease the text size also.

Unknown says: 2/10/2016

vai, kaj hosce na, second bracket er age pore sob jaygatei diye dekheci. ekhon ki korbo?

BloggerSpice says: ADMIN 2/10/2016

First you need to understand the CSS scrip. otherwise you won't able to customize template.


add this above closing bskin.

Unknown says: 2/10/2016

Sir Blogger Lab Full Width V1.1 Responsive Template এ POPULAR Tab এর পাসে sidebar-commentsx1
এর অখান কমেন্ট শো করে না ...। কি করতে পারি ...।

BloggerSpice says: ADMIN 2/10/2016

Template er folder a "Documentation" name file ace ooitate details code deya ace.ooi code add korlei comment show korbe.

Unknown says: 2/10/2016

vai, template ta check kore den kaj hosce na keno, apnar mail a send kore diyeci.

أسامة حمدي says: 9/12/2018

I have a subdomain and I use one of free templates of Google.

I didn't find the font file above. What should I do?


أسامة حمدي says: 9/12/2018

I have a subdomain and I use one of free templates of Google.

I didn't find the file above. What should I do?


BloggerSpice says: ADMIN 9/17/2018

Hi There
Blogger's latest Default Theme use Asynchronous font. So you don't have to use this trick. But if you are using custom Blogger theme then you have to use this method.

But first you have to identify the Font name of your current theme. After that apply the Asynchronous script into your existing font file.

Thank you. :)

Contact Form


Email *

Message *