@font-face & icon fonts

Friday, November 22nd 2013


Recently Todd Parker sent a tweet out stating ~370 million devices can't view Icon fonts like font awesome or icomoon. That's a lot of devices that can't render font icons! In a later tweet he links to this presentation with citations on the data he's providing. On slide 7 you see the the citations and what I feel like are some reaching numbers. Those numbers, I feel, are guesses.

To be totally fair providing hard numbers for things like this is near impossible. BUT, I do like where this discussion is going. Icon fonts are ubiquitous on the web now and some devices out there don't support @font-face. That's an issue when you use icon fonts throughout your site. I would like to break this down into my three thoughts on this #hotdrama topic.

  • Know your demographics
  • Fall back
  • We have to push the web forward

Know your demographics

I've been working on this pretty awesome web app over at IZEA which deals with social media sponsorships and creators. One of the things I did in my first month was to see the analytics data for our other sites so I know what I can expect to see as far as users technology. Things die and better things take its place.

This has to be the first thing you think about when building something new on the web. If you're building a site for the blind then you need to spend more time making sure it's more accessible or if you're building an app for developers I think it's safe to use more modern technologies like flexbox. Knowing what types of users that will be hitting your site will shape the website you build. If it doesn't, you're doing it wrong.

I'm willing to wage that it's okay to use icon fonts throughout your sites. If you are using icons on site in ways that things won't make sense if the icons missing then you may want to reconsider your usage in the first place. With that said... There are fallbacks you can use!

Fall back

Things like Icon font fallback exist. If you combine that with modernizer you've got a pretty kick ass system for using @font-face and icon fonts. I think we all should use a fallback for fonts but like I said it really depends on your user set. If 0.68% (2k visits) of your users can't see the icons on your site do you want to spend the time to address that, or something much more pressing?

We have to push the web forward

I feel like if less than 3% of users that hit your site are using something unsupported then you can't stress over it. Sure it sucks that they are seeing something that might be broken, but it comes with the tech territory.

If IE9 were at 3% usage you damn well know no one would support it. Why put the time in to make it work with a small fraction of your users actually seeing it? I feel this is the case with @font-face. With the exception of opera mini, other browsers that don't support @font-face are dead.

Lets go back to the slide show Todd linked to in his tweet. Citation [2] linking to the Google supplied statistics about the Android platform gives you this disclaimer right at the top:

Note: Beginning in September, 2013, devices running versions older than Android 2.2 do not appear in this data because those devices do not support the new Google Play Store app. Only the new app is able to measure the number of devices that actively visit Google Play Store and we believe this measurement best reflects your potential user-base.

That sounds pretty dead to me. If Google isn't supporting their own OS anymore I think it's safe for me to call it quits too.

Now let's talk about Opera Mini. I know that it doesn't support @font-face, but it doesn't seem to support other things like YouTube (obviously not a big deal but noteworthy). I have to side with Dave Rupert here:

@toddmparker @scottjehl IMO, Opera Mini should change their policy on icon fonts. For a better web.

I can't agree more. If you need anymore swaying Opera Mini is the only browser on this chart that doesn't support it.

What I'm trying to say here is: we can only support things for so long before we need to just move on and push for better technologies.

Final thoughts

I believe we should provide fall backs for icon fonts, use them responsibly, and push the web forward. If your project calls for supporting a majority of the opera mini users, then you better not use font icons and maybe you should look at an SVG solution instead.

With all of this said, I think Todd is right to a certain extent. We need to consider all users when building websites and worry more about their UX rather than what makes our development easier. At the end of the day when we're done building the site, they are the ones that have to use it.