Font Awful

I have become increasingly disappointed with icon fonts, specifically Font Awesome.

Icon fonts are an easy trap to fall into. They open a project to an impressive range of custom design. An icon font can consist of many thousands of characters. It is very simple to copy and paste the scant lines to load a icon font. And overall even just a few icons can make a good site look great.

However, icon fonts are outrageously expensive. Version 4.5.0 of Font Awesome, what was previously used on this site, consists of a 7 KB CSS file and a 65.4 KB WOFF2 file. However, the base page weighs only about 5 KB. Font Awesome is more than a 1300% increase to page weight. Sure, the font is loaded via a CDN, so revisits would be faster and lighter. But icon fonts are paricularly volatile. Version 4.5.0 of Font Awesome is far from current, being 6 versions out of date. So not only is it less likely that a browser would have a particular version of a font cached, but there exists a burden on the user's machine to cache multiple versions.

Fonts also cause deferred page rendering as they are applied via CSS. They can completely block rendering of a page while being loaded and applied. Because waiting for at least 70 KB of a font is not ideal, asynchronous font loading systems exist. Through black magic DOM manipulation, a browser can be tricked into rendering a page immediately, downloading a font, and then applying CSS including the font. Although page content will display for a user immediately, it will be incomplete until the font has loaded. Text may suddenly change in font family, icons can pop in, and the entire content of a page could shift dramatically.

Using an icon font is suboptimal when compared to SVGs. SVGs are multichromatic, effectively having limitless colors per icon. SVGs can visually scale infinitely. And SVGs can be customized with CSS properties and filter effects, even including advanced features like animation. Fonts cannot do any of these things. Pound-for-pound an SVG icon will be heavier than a font icon, but only primarily due to advanced versatility. To combat this, SVGs are scalable in their ability to be applied on an individual basis. A singular font icon will be lighter than an SVG equivalent, but you have to load the entire font to display it.

Icon fonts are a hamfisted technique abusing ill-fit technology at the viewer's expense. They are overall a suboptimal solution.