Icon Fonts and Why They Suck!Written by Jeffrey Bennett
So I’ve been experiencing some interesting things over the past year or so, now that I’ve been using content blockers on my iPhone.
One major feature I use is font blocking. Fonts are often very large and are essentially just visual decoration for a website. While I love a good font, there’s a growing phenomenon of fonts used as icons.
Icons are a representation of an idea, not a letterform. This has become an epidemic across the web, and frankly I’m disappointed.
Fonts are not meant to be icons.
There! I said it. I look forward to your angry letters. 😜
Let me show you what happens when these icon fonts are automatically blocked.
Website after website after website become more difficult and sometimes completely unusable simply because their font files don’t load.
Common patterns suggest to me there may be a hamburger menu in the top left or top right, but what happens if the missing font determines the tappable area? It suddenly cannot be opened at all without disabling content blockers and reloading the page.
Frankly, I have better things to do with my spare seconds than try to figure out why your website isn’t working on my device. There are always other options!
A Better Option
Icons are best served using SVG. What’s more is you have an exponentially greater amount of flexibility using SVG icons over fonts.
Sure, you can change the color of a font or scale it with font-size, but you can do that with SVG too. And a hell of a lot more!
SVGs are considered images, and therefore are rarely disabled (unless you’re serving content to a blind person’s device, and in that case, you have entirely different variables to consider).
The vast majority of fonts are based on vector graphics, so this means converting them into SVGs is just a matter of extracting the icons you need and saving them in a new format.
It really comes down to knowing your potential audience and whether your design will be resilient enough to get your message across to as many prospects as possible.
Does your website stand up to the challenge?