dysphoric.dev

Icon fonts must die.

Other bloggers start whatever they want to say with some personal story so I will do that too

Today I came across a post by someone who was wondering why, on some page loads, mastodon would show a lot of weird characters instead of the icons they are used to. This is caused by mastodon using fontawesome and their browser probably failing to load the font in some instances. (I replied to them what I thought it might be and just confirmed it using the dev tools of my desktop browser.)

This reminded me that I had written this whole blog post about why you should not rely on icon fonts before I implemented auto-saving in this blog (and lost most of the text to my pc crashing) -so here's my next attempt of publishing this text.

What are icon fonts?

If you're not a web dev, you probably don't even know what these things are. Well, to put it simply, icon fonts are icons that "pretend" to be a font so that browsers render them as inline text. A very popular example is Font Awesome[^1].
This used to be necessary because browsers did not support inline SVG yet and including img tags within your text is a terrible idea.

[^1]: Font Awesome is not a "pure" icon font anymore since they also provide SVG versions of their icons and they certainly should not die.

That doesn't sound too bad, why should they die then?

The thing about icon fonts is that they are inaccessible, possibly add a bunch of unnecessary overhead and are difficult to pull off right.

Because I plastered my LinkedIn and GitHub profiles with remarks that I care about accessibility, I will focus on that -however, I also have run into the unnecessary traffic and performance overhead so those will be mentioned as well.

Woooho another semi-personal story time

I first learned about icon fonts during an apprenticeship. At the last day before the winter holidays a colleague told me that I could make the site I was working on looking a bit more modern by adding fontawesome to it.
I quickly grabbed the free version and replaced a lot of text with icons. -Now my page looked cool and modern and.. didn't work anymore when I enabled an extension to force a different font.
(I later wrote a font-forcing extension that does work with fontawesome and most other common icon fonts but it's far from perfect.)

Well, this wasn't what I wanted. Even though I didn't really know how at that point, I wanted as many people to be able to use my website as possible -without turning off their assistive technologies.
So I went back on the website of fontawesome and found out they had an SVG + JS version. "Yay" I thought, "I'll be able to use it after all!"
Once implemented I saw that this was far from perfect though.
My page had just grown 1.7mib per request (I wasn't able to use the CDN because the application had to run on the company's intranet without internet access and although browser caches are a thing even for locally served content, you shouldn't rely on them too much.)
Also now my layout shifted a bit after every load because the JavaScript had to go though the dom and replace every icon with an svg file.

That wasn't what I wanted either. I did not really know what to do about it at the time. A bit later I figured: "What if instead of replacing the icons using JavaScript, I simply serve the page with them already included?" and wrote a small blade template (the application I wrote was using Laravel) to not only include icons as inline SVG, but also give them an aria-hidden='true' attribute and sr-only alt text to improve accessibility for screen readers.

Enough stories, time for some cold facts

Why should you stop using icon fonts:

1. Screen readers don't like them.
   • Best case, they won't read anything out at all, worst case they will read out garbage that'll make your website even more difficult to understand
   • This can be remedied by wrapping your icons within a container that has aria-hidden='true' set and some other way to communicate what the icon is saying
2. Font-forcing extensions may break when you use icon fonts
   • Even though I was able to write an extension that was useful to me personally, it is far from feature complete with "competing" extensions that don't work with iconfonts -Fixing that has been on my side project backlog for a while now
3. Usually every single icon has to be loaded with every (un-cached) load.
   • This isn't a huge issue since browser caches do work most of the time and the fonts are pretty well compressed but still... Not something I want for my websites.

What should you do instead:

1. Use inline SVG
2. Hide that inline SVG from screenreaders (although they should be ignored either way)
3. Add a (text based) way to know what the icons mean
   • This could be either a span that has CSS rules applied to hide it from non-screenreaders
   • Even better: Don't rely on fonts to convey meaning at all and only use them for aesthetic purposes

What you should do if you have to use icon fonts:

1. Hide your icons from screenreaders
2. Do not rely on icons to convey meaning
   • If impossible (like on some mobile layouts) make sure to at least add text to explain the icon to screen readers
     Maybe it's a good idea to show that text on large screens and hide it on smaller ones -That will give you bonus points for responsiveness and being a very cool person overall (probably)
3. Use an established icon font that utilizes common class names
   • My extension works by not applying the forced font to elements that contain those class names (.fa for fontawesome for example)