Webfont Icons: an Alternative to Images

Let’s be honest, creating dozens of tiny icons in a graphics package isn’t fun. Even when you’ve gathered a decent set, you end up managing dozens of tiny files or creating image sprites and slicing them in CSS.

Fortunately, HTML5 provides us with another option: webfonts. A font set can contain graphical icons and character sets. Wingdings is the most well known but free fonts such as Iconic can be more useful and provide example HTML and CSS code.

Once you’ve found or created a suitable font, you’ll need to convert it to a number of formats to ensure good cross-browser compatibility. The @Font-Face Generator at fontsquirrel.com does the hard work for you and supplies a ZIP file containing all the fonts and CSS code. The font is then imported at the top of your CSS file, e.g.

It’s possible to add icon characters to your HTML file, such as using an ‘r’ for Iconic’s RSS icon. However, that may confuse people using screen readers so CSS pseudo elements are a safer option, e.g.

Your HTML:

<a href="rss.xml" class="rss">RSS Feed</a>

Your CSS:

.rss:before
{
font-family: "IconicStroke";
content: "r";
}

The Advantages of Webfont Icons

Webfonts can be an ideal alternative to graphics:

fonts can be scaled to any size, use any color and have CSS effects applied

webfonts offer good cross-browser compatibility and even work in IE6

a single font file can be more efficient than multiple images

The Disadvantages of Webfont Icons

Webfonts may not always be appropriate:

font characters are single-color (although CSS3 effects can help)

generating fonts is not as easy as PNGs or SVGs

image file sizes will be smaller if you only require a few icons.

Overall, there’s little to dislike about webfont icons and they could cut development time. Have you used them in any of your projects?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written almost 1,000 articles for SitePoint and you can find him @craigbuckler

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja

http://somerandomdude.com/ P.J. Onori

Thanks for the article, I’m glad to see more writing on this subject.

There is another disadvantage to the current implementation of my Iconic font set – the icons were arbitrarily matched to unicode characters. Philip Shaw came up with a much improved method which I am currently using (and will be writing about in the next week or two).

The hope is to help rally people around a standard so that we can begin seeing icon fonts available at font hosting services like TypeKit. Fingers crossed…

http://mikeritteronline.com Mike Ritter

Made me look back to using good ol’ Webdings and Unicode fonts. I hadn’t thought about this in a long while. Your suggestion of using pseudo-elements has my mind racing to ways to really implement icons in a new way.

http://mikeritteronline.com Mike Ritter

Note: another option for screen readers is to place the symbol in an abbr tag

http://joezimjs.com Joe Zim

Wonderful suggestion!

R Sims

I’m intrigued! But the demo page link is returning “server not found”…?

http://www.optimalworks.net/ Craig Buckler

It appears to be there? Perhaps there was a temporary glitch…

Ben Truyman

Two things to point out:

– Using alphanumeric characters mapped to icons in a font can hurt accessibility and create strangeness with regards to SEO depending on your implementation. A screen reader will read out the literal letter or number for every icon.
– While the custom fonts will work in IE6 and IE7, your implementation using the `:before` pseudo element will not.

Other than that, this is a great way to implement iconography without the use of something like SVG — allowing them to easily scale and be recolored.

http://www.webhipster.com Vincent Young

Ben, these are good points. I have noticed the latest stable releases of NVDA/Firefox exhibiting this behavior of announcing the alphanumeric content in CSS.

Seems where this could possibly make sense is when the icons are mapped to an equivalent Unicode entity where the icon image is similar to the Unicode image, but even then, can be a bit sketchy in terms of accessibility/semantics.

Other techniques such as, SVG/VML/Canvas should generally be explored first for scalable images.

http://www.web3box.com Daniel Gheorghe

This seems great. However I have a question that I hope you guys can answer. What impact would this have on search engine optimization. Regarding the fact that CSS 3 is needed to make gradients and other effects this is really a drawback for my web design work.

http://www.optimalworks.net/ Craig Buckler

SEO could be affected by:

1. Page weight. If using a font reduces page weight it’ll be a marginal SEO benefit.

2. Image use. Google likes to see img tags or other media on the page (as opposed to plain text-only). If you replaced all your images with webfonts, you might be downgraded a little.

However, you’d mainly use webfonts to replace decorative icons which would have been defined in CSS. I’d be amazed if there were any noticeable impact on SEO.

http://itmitica.com/en/ itmitica

If webfonts work in IE6, how is that a HTML5 improvement?

Is there a way to block custom fonts now, aside from using add-ons like NoScript? I wouldn’t want potentially offensive glyphs loading up on my 70 yrs old mother’s computer, right?

This is design. Do these glyphs render good enough or am I trading downwards for the sake of novelty?

http://www.optimalworks.net/ Craig Buckler

Remember that standards don’t become standards until at least two vendors implement a technology. IE has supported downloadable fonts for more than a decade but copyright issues meant the technology remained in limbo for much of that time.

As for blocking fonts, it’s easy with Adblock and similar tools. Simply reject .woff, .ttf, .otf or .eot files. But do you block every image on your mother’s PC too? I’m sure if you look hard enough you’ll find potentially offensive JPGs on the web.

http://www.itmitica.com/en/ itmitică

I didn’t know Adblock can do that! Nice one, thanks :)

I see what you’re trying to do here ;) But no, images and webfonts are not the same. Not at all. The fact that you can easily build a non-standard webfont, that replaces glyphs that should be there but actually display completely different words with completely different meaning, the fact that a screen reader and a visual representation of those words can be different, it’s not the same with putting an image in a web page and have a wrong description for it.

Imagine this: “Welcome” in a standard font becomes something offensive like “Yousuck”. It makes room for a new kind of online malware…

http://www.optimalworks.net/ Craig Buckler

Mmm, I’m not convinced it would be malware but it could have an impact on SEO. It’d be difficult to do though – you’d need multiple fonts to ensure messages translated perfectly.

http://www.itmitica.com/en/ itmitică

I’m sure some minds will look at this as a fun challenge :)

http://joezimjs.com Joe Zim

I don’t this would come in too handy for my current website (http://joezimjs.com), but I am working on an app that would probably benefit from some nice little icons. I’ll have to see how it works out.

Gar_onn

I made a tool to make a SVG font: http://fontspot.co.cc/ converts SVG paths to a SVG font that you can convert at fontsquirrel.com/fontface/generator