An A-hole for @font-face Font Icons

Image of some glyphs from the Zaph Dingbats typeface.Remember Webdings? Hell, remember Zapf Dingbats? Familiar with the Unicode Standard? Do you still find icons in your fonts to be so damn queer? Well I think you cray cray and I’m about to tell you why.

History

1977 – Mr Hermann Zapf and the International Typeface Corporation were obviously ahead of their time creating a collection of symbols and such in one typeface.

1985 – Zapf Dingbats makes its big debut when it was widely distributed in the Apple LaserWriter as a built in PostScript font.

1987 – Unicode is an idea by a few nerdy guys from Xerox and Apple.

1991 – The Unicode Standard is born!

Unicode

If you’re going to weigh in, please read the Core Specifications. I admit I had to go over the core specifications doc a few times, focusing on section 2.8 unicode allocation, before I really started to pick up what was being thrown down.

At first I interpreted the Private Use Area as the place to put all my custom glyphs, I was oh so wrong because this is for shared systems like emoji from iOS device to iOS device. So I kept reading the section, but things just weren’t meshing too well. I thought, why would I put my icons in a place that will never be defined in the standard when there are great code points that have been defined? Most of us are using home icons, arrows and such. The definition is there, we just want to use different artwork. So BOOM! I decided to assign unicode points that are as equal as possible to what the art represents.

Fallbacks

Some folks like to jibber jabber about how Opera mini just can’t hang and I have some great news. It can and it does. Without losing focus on ~99.3% of the rest of the world, the problem with Opera mini is its inconsistency in that it relies on your devices default font, not its own. So the font it picks up might not have the glyph you wanted as a fallback. Although if you’re considerate about your choices and test on the devices and browsers you find important you can avoid the non-rendering issue. So while you’re flipping out about icons on Opera mini, I say to you kind reader, how about those accessibility features on Opera mini …

On BrowserStack I had ran a webpage on all of the 46 mobile device emulators and only came out with one issue and one case in which the solution safely fellback to unicode glyphs. LG Nexus running Android 4.2 didn’t display the second glyph in the custom font and iPhone 3GS running iOS 3.0 fellback to using unicode glyphs, which are all present. Not a single test reveled to me a Special Character (commonly known as a box).

I went further on BrowserStack and checked out the desktop browsers to no surprise, no IE6 and IE7 support, but with Progressive Enhancement in mind, because these browsers do not support CSS 2.1, sufficiently or at all, the user will see no icon. FireFox 3.0 experienced the unicode fallback, but again not a single test reveled to me a Special Character.

Artwork

Do you think you should include trademarked logos or artwork in your font? No sir, or miss, please do not! An icon is not a logo. There’s your slab of SVG vs background image to squabble over. I’ll save that for another day, or maybe touch on it a little in the next section.

Why Not SVG

Why not SVG indeed. It’s a fantastic format, there’s an animation API that SVG can take advantage of and all sorts of great stuff. A few reasons SVG is not yet an option for me is that it still does not have a widely enough adopted level of support to be used as background images and you can’t do much in the way of CSS with em. Finally, fonts containing icons are more similar to a sprite/atlas sheet of icons than individual SVG images.

Browsers are all sorts of mishmash about SVG about when and where you can put it. That’s why some folks who are more of the fonts-are-made-for-letters people decided to make client side tools that first qualify your browser before showing you either SVG or raster formats as background images. If that’s your bag, go for it, but I like my solutions to not require JavaScript, or create additional http requests with JS disabled, let alone require it to show me what my browser is perfectly capable of already.

Hot Tips

Don’t copy the character straight out of a stinkin character map or webpage and paste it in your code and call it good. That’s gonna get you nuthin! Icons are non-essential they do not need to be in the content. Don’t get me started.

Avoid the Private Use Area for your web font icon. If you’re making an intranet/software/operating systems within a controlled environment totally get all over that PUA. If you’re making a website that is going to be external and used by anyone on any device, use equally meaningful code points in the unicode standard.

Use pseudo elements :before and :after and insert your glyph using the content property for some serious style flexibility.

Control display by setting the element to block. Keeps things consistent and in control.

Use a solution that works best for you!

In Conclusion

What I find interesting that in the name of Opera mini there are “solutions” being made. This is a browser that people are intentionally using to decrease their bandwidth and essentially bills, while those out there trying to make the SVG juggle are actually increasing the bandwidth usage serving the alternative. Using @font-face and thoughtful unicode code points you can offer a bandwidth friendly kind of experience to your users and look awesome with CSS when supported!

Please take a look at my FaceLift demo for code details and my method on the whole thang, and my Unicode Test Tool (crude and incomplete) to give your device a shot. Thank you!

This entry was posted in CSS, Development, HTML, Opinionated. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*