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.
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:
Use third party services to hand pick the icons and generate the webfont.
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% |
Thousands of developers accross the world. Terabytes of bandwidth saved. Less server resources used. Less electrity required. Less pollution...