This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
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
contentproperty. 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.
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2010-01-03T06:00:00+00:00) DIY Webdings—CSS Sprites using @font-face. Retrieved from https://www.scien.cx/2010/01/03/diy-webdings-css-sprites-using-font-face/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.