Written by

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. 😜

The Problem

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.

Comparing broken and fully-loaded icon fonts.

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.

Similar things happen on desktop.

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?

If you need help improving your website’s content quality, I’m more than happy to work with you. Just send me an email and we can talk about the details.

Get new posts by email 😎

Unsubscribe anytime. Privacy protected.