How to Remove Font Awesome from WordPress Theme

Remove Font Awesome from WordPress theme, it will help you to get higher score on Google PageSpeed Insights & will also increase page loading speed. Now days most of the popular WordPress themes comes with Font Awesome (icons) integration. And you might have encountered with the warning of Render-blocking JavaScript and CSS in above-the-fold content during the testing of your website on Google PageSpeed Insights.

Updated on

In this post, I will discuss How to Remove Font Awesome from WordPress Theme. Nowadays most of the popular WordPress themes comes with Font Awesome (icons) integration. And you might have encountered with the warning of Render-blocking JavaScript and CSS in above-the-fold content because of Font Awesome CSS file during the testing of your website on Google PageSpeed Insights. But before we dig into the details, we must discuss why you should Remove Font Awesome from WordPress Theme and how Font Awesome affects your site performance.

Remove Font Awesome from WordPress Theme
Remove Font Awesome from WordPress Theme

Let’s begin with what is Font Awesome

Font Awesome is the most commonly used vector icons toolkit, which is easily customizable with the use of CSS. You can change the size and color of icons, add a drop shadow or use animated loading icons etc. As the name suggests, the icons look really awesome and it gives a nice look to your website and Social sharing icons fall into the most used icons category.

Why you should Remove Font Awesome

Font Awesome has a wide variety of icons about 634 and most of the time we use few icons such as Social Sharing Icons, Icons related to Menu, Post Meta etc. When you implement Font Awesome on your website, it loads one CSS file (font-awesome.css) and one font file (fontawesome-webfont.woff), the size of the CSS file is about 8 kb which is okay and the size of font file is about 70 kb which is huge.

I tested the Font Awesome website (https://fontawesome.io/) on Pingdom to measure the impact on website loading and the results were eye-opener.

Font Awesome Website Loading Time - Pingdom Result
Font Awesome Website Loading Time- Pingdom Result

The landing page of 528 kB took 5.37 second to load, out of which 8 kb CSS files took 622 milliseconds and 70 kB font file took 948 milliseconds to load.

Font Awesome CSS File Loading Time - Pingdom Result
Font Awesome CSS File Loading Time – Pingdom Result
Font Awesome Font File Loading Time - Pingdom Result
Font Awesome Font File Loading Time – Pingdom Result

Clearly, Font Awesome (files) took about 28% time (1.5 seconds) of the total website loading time which is 5.37 second.

Note – Results of similar exercise might be different on the case by case basis because there are ‘n’ number of other factors i.e. the location of testing, internet speed, font files are loading from the same server or from a CDN etc. which impacts the website loading time.

I would recommend you to also check your website on Pingdom to measure the impact before drawing any inference.

So, Font Awesome affects your website and increase your website loading time. And as per the industry standards, your website should load in less than 1.0 or 1.5 seconds. Google also prefers websites with small loading time, in search results.

Now, it is totally up to you whether you want a fancy website with icons and all or you want a faster loading website.

How to Remove Font Awesome from WordPress Theme

There are multiple ways to Remove Font Awesome from WordPress Theme, and it totally depends upon how Font Awesome has been integrated into your website, here I will share two most commonly used methods…

  1. By putting a piece of code in your functions.php file
  2. By editing your style.css file

Warning – Removing Font Awesome may change the look and feel of your site and you may find some ugly looking sections. You can overcome this issue by tweaking the CSS of your site.

Remove Font Awesome from WordPress Theme by editing functions.php

Many popular WordPress themes like themes from Mythemeshop include Font Awesome in the theme itself and it loads locally from your server. In order to Remove Font Awesome from WordPress Theme, you need use function wp_dequeue_style in your filefunctions.php and you also need to identify the $handle of the stylesheet which you want to remove.

$handle is the unique name of your stylesheet, in this case, $handle is fontawesome I suggest you to look into functions.php file for below line of code and get the handle of your stylesheet.

wp_enqueue_style( 'fontawesome');

Add the following code in end of functions.php

//* TN Dequeue Styles - Remove Font Awesome from WordPress theme
add_action( 'wp_print_styles', 'tn_dequeue_font_awesome_style' );
function tn_dequeue_font_awesome_style() {
      wp_dequeue_style( 'fontawesome' );
      wp_deregister_style( 'fontawesome' );
}

Do not forget to take backup of your original filefunctions.php before making any changes. So that, if something went wrong, you can revert back using the backup.

Remove Font Awesome from your website by editing style.css

If Font Awesome is being called from style.css file in your theme as shown given below, you can Remove Font Awesome by deleting the line start with @import url(...........) (as shown below)

@import url(/css/font-awesome.min.css);

or

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

Once you delete these Font Awesome imports from CSS, Font Awesome will stop loading on your website. This method is also applicable to the Non-WordPress sites.

Remove Font Awesome from your website (Non-WordPress)

If you own a Non WordPress site, there are high chances that Font Awesome is being directly called from the index.html file. Open the index.html file in text editor, and find the code starts with <link rel="stylesheet" href=”…………….”> (as shown below)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >

or

<link rel="stylesheet" href="https://yourdomain.com/assets/css/font-awesome/4.4.0/css/font-awesome.min.css">

Remove these lines from an index.html file and save changes. And you are done, Font Awesome will not load on your site.

Removing Font Awesome from your WordPress theme will decrease your web page size and hence will result in a faster loading website. I do not use Font Awesome or DashIcons on my website to optimize the page size. And if you are using Genesis themes like I use, do visit again in a couple of days, my next post is about How to remove DashIcons from Genesis themes.

Hope you will find this information useful. Do let me know which methods work well for you or if you find it difficult to implement via the comment section below. You can contribute to making this world with faster loading websites by sharing this post.

Cheers!!!

You may also interested to read about:
How to Defer Parsing of JavaScript

Why you should Disable Server Signature by Editing .htaccess/Apache
Remove Google Fonts form WordPress Theme

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

6 thoughts on “How to Remove Font Awesome from WordPress Theme”

  1. Avatar of James

    The code for the functions.php file worked perfectly. Thanks! Very Helpful!

    Reply
  2. Avatar of Birgitte Tüpker

    Hello!
    Any idea how to remove a bootstrap link to font awesome?
    This code is in the Final tiles Gallery Plugin for WordPress.
    I commented it out, but it will be overwritten by the next update, I think.
    wp_enqueue_script( ‘final-tiles-gallery’ );
    wp_enqueue_style( ‘thickbox’ );
    wp_register_style( ‘fontawesome_stylesheet’, ‘//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css’ );
    wp_enqueue_style( ‘fontawesome_stylesheet’ );
    }
    Thanks in advance – if someone is still onterested in this thread. 😉

    Reply
    • Avatar of Saurabh K

      Hi Birgitte,
      Just dequeue the fontawesome script permanently.
      Add the code given in the post, in functions.php file. Use $handlefontawesome_stylesheet.

      Reply
  3. Avatar of James

    Great article, thanks! Somehow, my problem remains, though… After adding the line to the .php file, nothing has improved and the .css files don’t contain an @import function, but rather the following:

    @font-face {
    font-family: ‘FontAwesome’;
    src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0’);
    src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0′) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    I’m using a theme called “Satisfy” and it has a fontawesome-webfont.svg (?) file which appears to be the biggest problem with over 2600 lines of code. I’m really not sure what to do here!

    Any help would be highly appreciated, if someone has an idea about this kind of problem. 🙂 Thanks in advance,

    Have a nice day,
    James

    Reply
    • Avatar of Saurabh K

      Well, this is the code you are looking for. But beware, it will completely remove the FontAwesome file, which may break your site’s functionality. Keep a backup before you delete anything.

      Reply
  4. Avatar of deewinc

    The CSS one worked. Thanks!

    I wonder how a file that’s only 70kb in size takes over 1 second to load. GTmetrix helped to identify the exact path of the file in my WordPress. What I did was follow the path and I found several Fontawesome files inside the CSS file.

    Mine appeared this way alongside several others
    => url(‘fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’)

    With others this is how it appears as shown below

    url(‘fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’),url(‘fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’),url(‘fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’),url(‘fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’)

    So, I only deleted the one that was lagging the website as indicated on GTmetrix and oooh boy ooh boy, it cut the website load time by nearly 2 seconds.

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.