Pros & Cons for Icon Fonts Like Font Awesome – Design Tips for Developers
I think icon fonts are pretty awesome. I really like working with them a lot, and I think, in most cases, that’s totally fine. There is one major drawback about them, though.
An icon font is just like any other font that you might be using, but it’s just made up, literally, of icons.
They might be social media stuff, they might be icons of your own design, they could be all sorts of things. They’re really awesome, and they’re a great way to provide resolution-independent graphic assets to your site. They’ll look great on retina displays and everything else.
Icon Fonts: No good fallback
The thing that you have to watch out for is there’s no good fallback. So, if the web font doesn’t load, there’s just nothing there. While I still use them, it’s because I haven’t gotten my act together enough to try Grunticon. That is something from the Filament Group that they created in order to let you take SPG graphics and create PNG fallbacks and the CSS to use them. That way, you could have all these icons that work in a resolution-independent manner just using SPG, and then still have PNG there as a fallback for devices that don’t understand SPG, which is a pretty small percentage these days.
The reason I think this is important and worth thinking about is that there’s always a point in time when the web font is not loaded. So, there’s always going to be a point in time in that load process when your icons aren’t there, and if there’s no good fallback, people have no idea what those things are. They don’t know that it’s a link to your Facebook profile. They don’t know that it’s an element that’s supposed to guide you through the UI and indicate that this is a list of articles. So, it is worth thinking about.
Icon Fonts don’t work well for international audience on Opera Mini
You also have to consider that if you have a very international audience, there are tons of devices, 350 million of them or so, that are using Opera Mini that doesn’t support icon fonts or any kind of a font at all. That is kind of a big problem if you work on an international site that has a ton of traffic from areas of Africa, India, or Asia. That is something to think about. I think that if you have a largely U.S.-centric audience, then maybe that’s fine. I know I rely on it.
Using Modernizr to Check
If you use Modernizr built into your code, then you can do a bunch of features detects and find out if web fonts will be supported. Hopefully, that will answer your question there. In general, you can probably say, “Sure, I’m going to use icon fonts because they’re supported pretty much anywhere,” unless you fall into that category of dealing with a lot of people with slow connections and using really low-capability handsets that need to get all of this stuff right away. Take a look at Grunticon from the Filament Group, and that will give you an easy way to go around that and use SPG instead. Hopefully that answers your questions.
Other posts in this series with Jason Pamental:
