Zach’s ugly mug (his face)

Zach Leatherman

DIY Webdings—CSS Sprites using @font-face

03 Jan 2010 Zach Leatherman 5 min read

Almost everyone knows the Webdings font or its sibling Wingdings. Even if you don’t, chances are pretty good that it’s installed on your system.

Webdings is a symbol font designed in 1997 as a response to the need of Web designers for a fast and easy method of incorporating graphics in their pages.

Webdings is ideal for enriching the appearance of a Web page. Because it’s a font, it can be installed on the user’s system, (or embedded in the document itself) is fully scaleable [sic] and quick to render. It’s a perfect way of including graphics on your site without making users wait for lots of graphic files to download.

– Source Microsoft Typography

Microsoft was onto something here, and there is a nice parallel that can be drawn between the font and a CSS sprite: namely that multiple images are stored under the guise of a single HTTP request. So, why not create our own font and use it as a CSS sprite? Each character in the font (glyph) will be a single image in the sprite.

Why is this awesome?

  • We can change the color of our font using nothing but CSS color. This is a big one. We don’t have to have separate images for hover states! And if we want to change the color scheme, there are no new images to generate and we don’t have to make any changes to the font to do so.
  • Don’t have to monkey around with difficult to maintain CSS positioning code.
  • Fonts scale, graphics don’t. Zooming in on a graphic will result in a pixelated image, but fonts will be smooth like a 6 blade razor shave. Try zooming on the demo file below.

Why is this not awesome?

  • Font glyphs can only contain one color.

  • May experience the Flash of unstyled text (FOUT) while the font is loading.

  • Extra markup required for IE6 and IE7. While @font-face is supported in all non-extinct versions of IE, each @font-face sprite requires a corresponding text character on the screen. For instance, A, the A is required to display the @font-face Sprite stored under the A glyph.

    Luckily, in most browsers we can inject a character using CSS :after/:before and the content property. Unfortunately, this is not supported in IE6 or IE7. I haven’t investigated whether or not this might be solved using other means (CSS expressions) yet.

  • Safari asks for permission to use the font with a scary popup box, which I assume is a security precaution gleaned from the Windows Vista playbook.

Demo

The following jQuery UI Icons are currently used in jQuery UI and are stored in one big CSS sprite.

It was pretty trivial to create a font with a subset of the jQuery UI icons (only the first 20, just a proof of concept here) using the wonderful FontStruct utility. Then, I took the TTF generated by FontStruct and plugged it into the completely lovely FontSquirrel @font-face Kit Generator. That gave me everything I needed for a fully cross-browser test.

View the Demo

Let me know what you think!

Successfully tested on:

  • Google Chrome 4 (Mac)
  • Safari 4 (Mac)
  • Firefox 3.5 (Mac and Windows)
  • Internet Explorer 8
  • With documented limitations above: Internet Explorer 6 and 7 (Compatibility Mode in IE8)

Does not work on (no @font-face support):

  • Google Chrome 3 and prior
  • Firefox 3 and prior

Read more about @font-face support from Paul Irish.

13 Comments

➡ Load Disqus to Leave a Comment ⬅

How does this affect licensing with different type faces?

I was about to say it'd be interesting to use Webdings in the same font-stack so you can use the native font (and save an http connection) if its there.

.dingbat { font-family: webdings, 'jQueryUISubpixelRegular' }

To do that:
1) your font would have to use all the same glyphs as webdings for the various dingbats
2) webdings would have to carry most/all of the gylphs that you want

Sadly 2) isn't true so the idea is mostly moot.

But aside from that, this is a great exploration. Alongside people using it for flourished dropcaps and we're starting to see the clever use cases of @font-face.

Zach Leatherman

04 Jan 2010 at 12:46PM

Hey Dan,
Licensing for fonts hasn't really changed at all with @font-face, if you want to use a custom font you'll have to make sure it's an open license. Check out http://www.fontsquirrel.com/ for some nice fonts.

Zach Leatherman

04 Jan 2010 at 12:50PM

Hey Paul,
I would be surprised if anyone wanted to use the abomination of ugliness that is Webdings, even if it had glyphs to represent what you needed. It's been out cross-platform for quite awhile, and hasn't caught on -- I'd say its time has passed.

Are web browsers smart enough not to request the .eot/.ttf file if it isn't used on the page? I'd be surprised if that was the case.

The "When exactly do browsers download the font file?" section on my FOUT post has details about browsers being smart enough to NOT download a file if they don't have to. Summary: all are smart except for IE. (Surprise!!!)

Zach Leatherman

04 Jan 2010 at 03:45PM

Great, thanks Paul!

So you rebuilt the icons using FontStruct? I wonder if their is a better tool for this sort of thing.

Zach Leatherman

04 Jan 2010 at 04:28PM

It was certainly the easiest tool to use for a quick demo. I found it to be pretty intuitive, though probably not something a power user would dive into since they limit you to their stock building blocks to create "pixels."

If you find a good utility to make fonts, let me know!

I'm not seeing the custom font on mobile safari. Also, have you (or @Paul) experimented with @font-face + data URIs?

Zach Leatherman

05 Jan 2010 at 02:47AM

Looks like mobile Safari doesn't support @font-face.

If you look at FontSquirrel's Kit Generator, it also includes an SVG font option for working with the iPhone, which I didn't include as part of this demo. FontSquirrel also includes a separate stylesheet as a part of their kit that uses data URIs.

Steve Souders has some thoughts on @font-face and data uri's.

@Zach-

Awesome idea! This is something that should really catch on. Using FontStruct to create arrows was inspired. If you were patient enough (and didn't want to buy a font design app) you could probably dump EPS files from Illustrator into FontForge and generate fonts that way. Hey I just came up with my next big idea :-) The Dingbat Generator. Hah.

Anyway, there are some nice icon fonts that would work well with this idea... I know because I created some of them and licensed 'em for @font-face. http://www.fonthead.com/fon...

Luke, yah @font-face works fine with data uri's in FF/Saf/Chrome/Opera. I havent managed to get MHTML fonts working in IE. Mobile Safari currently only supports @font-face with an SVG font... and.. side note: there is no known way to do an svg font with data-uri.
SVG fonts are most easily constructed with font squirrel's generator but using Batik directly works too.

Zach Leatherman

05 Jan 2010 at 04:43PM

Ethan, thanks! Love the ClickBits font, and thanks for the FontForge idea, I hadn't tried that program before. Any plans to release the font-face kit generator source? :)