Using Icon Fonts, The Right Way.

July 5, 2016

Simply put: embedding icon fonts is bad for performance. There's dozen of well designed and maintained icon fonts, so why? Why would FontAwesome, Entype or MonoSocial slow down my site?

Well, the reason is the way developers embed it on a site. To me, it makes no sense to embed a whole library and use only a portion of its content! But many developers are paid by the hour and therefore tend to be a bit lazy...

It takes slightly more time and effort to properly use an icon font. But I believe it's our responsability as experts to make the web a better place.

Embedding only the icons you need

When I say "properly embed an icon font", I mean hand-picking only the icons needed for your project. There are several options to create a custom icon font:

  1. Use third party services to hand pick the icons and generate the webfont.

  2. DIY. Use the power of SASS/LESS mixins. https://github.com/rstacruz/iconfonts

How much can you save?

To give you a better understanding of how un-efficient it is to embed the whole icon font, I created a few example. I'm using Fontello to generates the custom icon font, and I picked different amount of icons. To be honest, I rarely worked on a project that requires more than 20 icons...

Name Size (KB) Icons Needed/Total Generated Size (KB) Savings (KB) Savings (%)
FontAwesome 4.6.3 886 20/634 19.5 866.5 97.8%
Typicons 2.0.7 436 30/336 59.6 376.4 86.3%
Elusive 2.0.0 327 40/304 47.4 279.6 85.5%

Can it save lives?

Thousands of developers accross the world. Terabytes of bandwidth saved. Less server resources used. Less electrity required. Less pollution...