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.
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.
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.
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.)
aria-hidden='true' attribute and
sr-only alt text to improve accessibility for screen readers.
aria-hidden='true'set and some other way to communicate what the icon is saying
.fafor fontawesome for example)
If you want to get in touch, write to contact(at)dysphoric.dev.
If you have found a security vulnerability I would be extremely thankful if you could mail me at
I am currently not in a financial situation where I can pay out big bug bounties but I will definitely invite you to a mate or something if we ever meet.
This blog also has an RSS feed.