Zach’s ugly mug (his face) Zach Leatherman

DIY Webdings—CSS Sprites using @font-face

January 03, 2010

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.

10,163 Views

< Newer
The 24 Clock on ALARMd
Older >
Don&#8217;t Give Up on Internet Explorer Yet

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

13 Likes

Tyler Stickalive, laugh, loniderekTanner HodgesSimon Cox :SEO:Christian "Schepp" SchaeferNicolas HoizeyapmeyerEvanSara Joy ✨mortendk 🤘Stuart RobsonFrancis Rubio is coding CSS
26 Comments
  1. Stuart Robson

    @StuRobson

    I finally found a tweet for the down vote button.

  2. Tyler Sticka, ☁️4

    @tylersticka

    Just so I’m clear, you’re saying this is all yours and @Hicksdesign’s fault, correct? 😉 24ways.org/2011/displayin…

  3. Zach Leatherman

    @zachleat

    definitely @Hicksdesign and not me

  4. Jon Hicks

    @Hicksdesign

    Old article contains outdated info? Whatever next! 😉 SVG support was so poor back then - it was a solution that didn't involve multiple PNGs. However I switched 7 years ago after this article: ianfeather.co.uk/ten-reasons-we…

  5. Raymond Camden

    Raymond Camden

    @zachleat dont you dare look at my 2003 posts.

  6. Khalid ⚡

    Khalid ⚡

    @ZacHlEAt dON’t feEl TOo bAd. 2010 WAs WeiRd aNyWaYS. At Least YoU WEREn’t wEARing a dRESS MAde Of meAT. :p

  7. Zach Leatherman

    Zach Leatherman

    @raymondcamden well now I have to

  8. Zach Leatherman

    Zach Leatherman

    @khalidabuhakmeh I would but the wildlife around here might have other ideas

  9. mortendk 🤘

    mortendk 🤘

    @zachleat i remember once i wrote a post about using gifs as fonts back in 98 - i though it was clever af <table> <td><img src="img/n.gif"></td> <td><img src="img/o.gif"></td> <td><img src="img/p.gif">… Truncated

  10. Zach Leatherman

    Zach Leatherman

    @mortendk is it still online!??! I want to see

  11. Lucien Immink

    Lucien Immink

    @zachleat I remember when I gave a presentation about using Flash to get fancy fonts on the web. We came a long way :)

  12. live, laugh, loni

    live, laugh, loni

    @zachleat 🎶 every day is a wingding road 🎵

  13. Eric Carlisle

    Eric Carlisle

    @zachleat At least it was 2010. I3 years later present day and I'm evangelizing "anything other than" to clients. ;-)

  1. Dan Leatherman Disqus

    04 Jan 2010
    How does this affect licensing with different type faces?

  2. Paul Irish Disqus

    04 Jan 2010
    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 dingbats2) webdings would have to carry most/all of the gylphs that you wantSadly 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.

  3. Zach Leatherman Disqus

    04 Jan 2010
    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.

  4. Zach Leatherman Disqus

    04 Jan 2010
    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.

  5. Paul Irish Disqus

    04 Jan 2010
    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!!!)

  6. Zach Leatherman Disqus

    04 Jan 2010
    Great, thanks Paul!

  7. Ron Disqus

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

  8. Zach Leatherman Disqus

    04 Jan 2010
    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!

  9. Luke Smith Disqus

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

  10. Zach Leatherman Disqus

    05 Jan 2010
    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.

  11. Ethan Dunham Disqus

    05 Jan 2010
    @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...

  12. Paul Irish Disqus

    05 Jan 2010
    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.

  13. Zach Leatherman Disqus

    05 Jan 2010
    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? :)
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)