Using Icon Fonts, The Right Way.

July 5, 2016
Webfont Performance CSS

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 20634 19.5 866.5 97.8%
Typicons 2.0.7 436 30336 59.6 376.4 86.3%
Elusive 2.0.0 327 40304 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…

comments powered by Disqus
Want a beautiful and engaging website for your business? Check out YOSA Digital×