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.)
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.
aria-hidden='true'
set and some other way to communicate what the icon is saying.fa
for 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
security(at)dysphoric.dev.
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.