How Users Kill Your Icon Fonts

I remember reading Alex Limi's post, Checkboxes that kill your product a couple of weeks ago and found out that icon fonts can be added to his list.

I came across this a few days ago at work. We were using Font Awesome in some development builds of two of our products. After some testing, I had heard that we received some feedback from Firefox users complaining about broken images in the UI. I thought that was strange since there were barely any images in the UI in question but once we received screenshots of the errors it was obvious.

The users were overriding the fonts we had specified in the UI, including the icon font so it looked like an empty glyph not supported by the font. The product in question is used mainly by members of the security community. Members of this community are known for being fans of custom stylesheets, user scripts, and never allow HTML in their emails.

After some searching I found that it's surprisingly easy to block icon fonts from rendering in your browser. Here's how to do it:

Firefox

Go to Firefox -> Preferences and click on the Content tab. There is a section called Fonts & Colors and if you click the Advanced button, a window will drop in and give you the option change the default fonts in Firefox as well as giving you the option to disable "Allow pages to choose their own fonts, instead of my selections above."

If you uncheck this, then all fonts that are loaded via @font-face, TypeKit, Google Web Fonts, and icon fonts will no longer work.

Chrome

Type in about:version into the omnibar in Chrome and find the Profile Path. Go to that path. For Mac the path is:

/Users/tteeling/Library/Application Support/Google/Chrome/Default

Once inside that folder find the User StyleSheets folder and there will be a custom.css file in there. Add this (or something similar) to the file and save.

* { font-family: 'comic sans ms'; }

Some elements of your site will be overtaken by the user specified style but not all. To get everything to obey the custom stylesheet we can add important to the declaration:

* { font-family: 'comic sans ms' !important; }

Is there a Solution to Prevent this?

Icon fonts have blown up in popularity over the past year and I can't think of a solution to this problem. SVG and PNG fallbacks come to mind but I have no idea how you can detect if an icon font is being overridden even if it is loading.

Should we care that a user can wreck their own experience? I understand that the situation I described is what most people would call an edge case but as front end developers, isn't our job to cater to all users the best we can regardless of device, browser, or scenario?

This encounter made me realize that even though icon fonts have a lot of great benefits, they do not degrade gracefully. In the meantime, we discontinued using icon fonts in our product and went back to using image sprites instead.