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 looks really awesome and it gives a nice look to your website and Social sharing icons falls in to 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 8kb which is okay and the size of font file is about 70kb which is huge.
I tested the Font Awesome website (http://fontawesome.io/) on Pingdom to measure the impact on website loading and the results were eye-opener.
The landing page of 528kB took 5.37 second to load, out of which 8kb CSS files took 622 millisecond and 70kB font file took 948 millisecond to load.
Clearly, Font Awesome (files) took about 28% time (1.5 second) of the total website loading time which is 5.37 second.
Note – Results of similar exercise might be different on case to case basis, because there are ‘n’ number of other factors i.e. location of testing, internet speed, font files are loading from 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 in your website, here I will share two most commonly used methods…
- By putting a piece of code in your functions.php file
- 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
wp_dequeue_style function in you
functions.php file 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
fontawesome. I suggest you to look into
functions.php file for below line of code and get the handle of your stylesheet.
Add the following code in end of functions.php
Do not forget to take backup of your original
functions.php file 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 on 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 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="http://yourdomain.com/assets/css/font-awesome/4.4.0/css/font-awesome.min.css">
Remove these lines from index.html file and save changes. And you are done, Font Awesome will not load on your site.
Removing Font Awesome form your WordPress theme will decrease your webpage size and hence will result to 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 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 works well for you or if you find it difficult to implement via comment section below. You can contribute to make this world with faster loading websites by sharing this post.
You may also intrested to read about:
Enable Accelerated Mobile Pages in WordPress
Why you should Disable Server Signature by Editing .htaccess/Apache