close

Gone are the days when images were used for icons. Now all icons can easily by used from the Web fonts. Font Awesome is the leading icon font. But this easy to use icon comes with a cost. By default, it adds 100 KBs of extra download when any user visits your site. It contains hundreds of icons that we never use. Neither we intend to use them ever. Yet, they are part of the font file and are download each time someone visits your website. While this may not be a problem for bandwidth consumption, it increases site load time. For a user with 1 Mbs connection, it will add up few extra seconds to download Font file and CSS file attached to it. And an increase in site loading time is a big no. It is bad for user experience and its bad for SEO too. It’s wide open that almost all search engines including Google use site loading as a ranking factor. So, we need to minimise this extra loading cost. And luckily, you can minimise file sizes in just a few minutes. Follow the steps below:

  • Download Font Forge from this link. Install it on your PC.
  • Download your Font Awesome files from your webserver to your PC.
  • Now Run and open your font files with Font Forge.
Font Forge Screenshot 1-min
Font Forge Screenshot

You will see a long list of empty places for icons. You Ca go to Encoding and click Compact. This will show the icons only.

Font Awesome Compact view in Font Forge
Compact view of Font Awesome in Font Forge

Now select the icons that you don’t need and with right click select on clear. This will delete icons that you don’t it. After all, we just need a few icons probably with 20.

Delete Font Awesome Icons that you don’t need

Now Press “Ctrl + Shift + G” buttons. A screen for exporting fonts will pop up. You choose the font file format and export it.


This way you can minimise the fonts. It will save you 100s of KB in font file sizes. It depends upon the number of icons you choose to use.
You can further optimise CSS file attached to it. But, it is not recommended. In case you don’t know any codes for Icons used, you can view it in CSS file and link it to other icons present. Also, the CSS file attached to it allows you to change icons. In the case of font awesome, you can view the list of all codes from http://fontawesome.io/icons/. If you need to change the icons, simply open CSS file attached to it.
You will see the list of codes in format “Fa-Code” with values like “f0XX”. You can copy the values of icons that are present in your font file and paste in places of icons that you deleted. You can do the same for replacing default icons with icons of your choice. Additionally you can use your own custom fonts by editing it in Font Forge. This way you minimise your font files and speed up your website. It acts well for both your site visitors and for your SEO Rankings. And best thing is that you can use this method to optimise all most any web-font.

Tags : Add custom font iconadd own icont to fontawesomeOptimise web fontsreduce font sizesreduce web-font size
Raju Chaurassiya

The author Raju Chaurassiya

Often in a major event, minute details are ignored which are crucial for such events. I love to dig such minute details of the events i focus on. And yes, i love writing a lot!..