skip to main content

TAMU Webmaster's Blog

Information and insight from the A&M Webmasters

Custom icon fonts: performance and accessibility

August 28th, 2013 by mdmcginnis

Like a fine sports car, an icon font or symbol font has good performance and it looks good too. Why?  Instead of making your site visitors download multiple icons or even a sprite, you can include your icons in a single web font, which is automatically downloaded and cached. Some icon fonts includes hundreds of symbols. To make it download faster, you can easily create your own smaller, custom icon font with only the characters you need. Iconmoon even lets you upload your own SVG images into your custom icon font.

But if not done right, icon fonts provide an accessibility challenge. Like any font, they include a set of characters, only they assign images to characters. But if you don’t have a font installed, what do you see on your screen. The original character, right, ? True, a web font is automatically installed when you view the page, but that doesn’t help much if you’re using a screen reader…  When we put an image on a web page, we always add an alt attribute (we do, right?) for screen readers. But font images (which are characters) don’t have alt attributes as such.

Pictos explains how to define the text equivalent of an font icon using HTML, CSS and ARIA-WAI codes. Symbolset uses custom ligature codes so that the word “mail” itself is displayed as an envelope. Try typing “left”, “right” or “home” on their home page demo. Iconmoon has an option to use the same technique with custom characters. That is, we could upload an SVG version of the TAM logo as part of our custom icon font, and assign it to the word “TAMU” or “Texas A&M University”.  Built-in alt attributes, so to speak.

Wednesday, August 28th, 2013 Visual Identity
Share this article

No comments yet.

Leave a comment