How to Fix Render Blocking Font Awesome CSS Script?

Majority of web designer uses Font Awesome as alternative of Image solution in websites. Formerly we used to use different images in our website but this makes our site slower. 

But after introduce of Font Awesome now we can design and develop our site without any hindrance.

Apart from positive side of Font Awesome now come into negative side. Excessive use of Font Awesome icons on website also affects the site loading speed. And now talk about Render blocking CSS; these types of CSS script generally affect a page loading speed directly.  

But you may think why? 

Because without CSS script we are not able to give beautiful design on a website. Yes this is absolutely true. But there are some CSS file which remains above the fold of a site that blocks a page’s normal loading time. 

And before complete page loading those render blocking CSS file load on above the fold of a site. As a result, normal page stop loading at the middle of the process.

asynchronous Font Awesome

Font Awesome is a CSS a script which is loads from their server and display icons on our websites. And this loads above the fold of a website. As a result, this is a render blocking CSS script. You may visit Google page speed inside to test your Blog and see the test result.

You will see in test result Font Awesome file has listed as render blocking CSS. This should optimize for increasing your website’s page speed.  

Google Page speed inside

But you won’t able to optimize this CSS file by hosting on other third party file hosting server. So the solution is asynchronous the Font Awesome file. Asynchronous is a popular medium of making a Blog site faster. 

Even Google AdSense using Asynchronous script to deliver advertisement on website faster. As a result if we use asynchronous the Font Awesome file on our Blog or website then it won’t count as render blocking CSS.

Let’s make your current Font Awesome file asynchronous. Please follow the below steps-

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard
Please take a backup of your Blogger template before proceed.

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

Step #3:
 Now find the below Font Awesome file by pressing Ctrl+F (Windows) or CMD+F (Mac)  

<link href='//' rel='stylesheet'/>


<link href='' rel='stylesheet'/>

Note that I have given example with latest Font awesome version which is 4.5.0, but in your site it may be 4.2.0 or 4.3.0 version. So please find the accurate version.

Step #4: Cut your Font awesome file from your site and Paste it in a text editor like notepad.

Step #5: Now copy the below 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" }) }loadCSS("Paste Your Font Awesome File Here");


  • Please replace the text Paste Your Font Awesome File Here with your Font awesome file from text editor.
Step #6: Finally click Save template button from the top of the screen.

Now it’s time to verify this script. First check your Blog that your Font awesome icons are loading or not? If loading perfectly then please go to Google’s page speed inside tester by through below URL.
And add your website URL and see Font Awesome file is not listed on render Blocking CSS. That means you have successfully convert your Font awesome files in asynchronous format. And your site’s loading speed now increase significantly. For any further query feel free to write me. Thank you.


  1. Unknown
    vai, apni j note text highlighter post korecen seti te text color black, setike white korte hole ki korte hobe? and ekti post a dui dhoroner note lekhar jonno ekadhik color background and font awesome icon use kora jabe ki? jemonti apnar ei post a korecen.
    • BloggerSpice
      Text highlighter onekgola share korci. jeita somporke jante chan seitar comment box a comment koron.
  2. Unknown
    Sir SEO Boss Responsive Template এর মতো Contact যেটা পপুলার এর পাসে আসে সেটা Blogger Lab Full Width V1.1 Responsive Template এর কমেন্ট এর জায়গায় করবো কিভাবে ?
    • BloggerSpice
      Mukil Bro. Please visit the below URLs for tutorial.

      Thank you.
  3. Unknown

    vai, uporer picture er moto 2nd notice box kivbe banabo?
    • BloggerSpice
      Please search in search box. You can use my latest notification widget from below URL.

      Thank you.
  4. চাঁদপুর প্রতিদিন
    Brother is many many thanks us.
  5. Unknown
    thanks, its work 100%. Btw, How to fix:
    Leverage browser caching
    Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:
    Exsample targets:…=json-in-script&callback=showrecentposts (1 second)…callback=showpageCount&max-results=99999 (1 second)
    "from pagespeed insights by google"
    • BloggerSpice
      It can solve by using Htaccess but Htaccess widely use in WordPress. For Blogger we can take a simply step. Just display your all image in original size. For example if you are showing your Post image whose main dimension is 700px X 400px then don't use extra large or large option for image re-sizing. Instead of that use Original image size option. It will help to leverage browser caching.
  6. I also have a trick to render blocking font awesome using @ font-face css
    • BloggerSpice
      Hi Samsury,
      If possible please share with us. Thank you. ;)
  7. what's it the meaning in step 4, should i Cut it and paste later, or just remove it.
  8. BloggerSpice
    Hi Ramana, If you are using font awesome script directly like below

    <link href='' rel='stylesheet'/>

    then just use below line to replace text ---- Paste Your Font Awesome File Here

    I hope you would understand. ^_^
  9. InspiredHeart
    This is very helpful. My only concern is that if the browser doesn't support Javascript, or Javascript breaks elsewhere on the page, it's possible Font Awesome (or whatever else we use this technique for) will not load at all.
    Do you have any suggestions for a way to have a fall-back method?
    • BloggerSpice
      Hi Inspired Heart, currently this can be use only for Font file and FontAwesome, I hope it will also work with Bootstrap.

      You can control javaScript on responsive section. Suppose you can see my "back to top" widget only visible to desktop version, but if you visit my site from mobile then it won't load.

      alternatively there are many conditional tag that can be use to load in different pages. :re
  10. Not working on my blog.
    • BloggerSpice
      This will work 100% i'm using this method in my site. One thing you can do, add the script below closing header.


  11. Faish Khan
    not working please help
    • BloggerSpice
      Hi Faish ^_^
      Did you replaced below text by Font Awesome file?

      Paste Your Font Awesome File Here

      if not then please replace it. And place it either above closing header or closing body. I am following this trick on my Blog and working fine.
  12. Its most working fine, i got 10 more score on test speed. But still have problem with caching browser (i'm using blogger host)
    • BloggerSpice
      Sounds good..:up
      This is bit tough to improve Blogger site speed to 100%. If you can use AMP Blogger theme then it would be better and faster.
  13. please help I look for the code <link.... in my html but couldn't find it, what do I do?
    • BloggerSpice
      Hi Favour :si
      Your Blogger theme doesn't contain Font Awesome. So you don't need this tutorial.
  14. harish
    Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog
    • BloggerSpice
      Great! :up
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up