Does icons inside font good for site?

Question

Hello! I wanna create special font containing only icons. and for each letter will be diffirent icon. I want to embed this font in css. and use like this if i need some icon:

<a class="icon">f</a>

and css

<link href='http://fonts.mysite.com/css?family=MyFontWithIcons' rel='stylesheet' type='text/css'>

which contains:

@media screen {
@font-face {
  font-family: 'MyFontWithIcons';
  font-style: normal;
  font-weight: normal;
  src: local('MyFontWithIcons'), url('http://fonts.mysite.com/font?MyFontWithIcons') format('truetype');
}
}

and to show icons with icon class:

.icon {font-family: 'MyFontWithIcons'; }

And letter "f" will be replaced with icon inside font which located on the place of f letter. and css works with font and replacing f with icon inside font. I think it's good idea or not? font file is less in size than lots of image icons. and also with this technique I can use diffirent font colors = diffirent icon colors? sizes and so on. So, it's good idea or not?

Answer 1

Yes it is quite a good idea hence there is a tutorial on Nettuts+ about that.

Nettuts+ | Using Fontface for icons

Answer 2

It's a good idea but it doesn't work in all browsers (yet). Also, it only works with 2 color images (black and transparent), which makes it rather limited. For people with text browsers or text to speech software, it won't make any sense. It's not really 'semantic', because the <img>-tag was meant for images. Using fonts for that won't make any sense from a html-only perspective. It also clutters your css.

So that's a lot of bad things just for a little bit less bandwith; I wouldn't bother.

Answer 3

• @font-face is not supported uniformly across browsers. Its a bit of a task to cater to all browsers esp. if including IE6
• Accessibility: screen readers won't read icons, they would still see an 'f' and not an icon
• You would need some fallback to degrade gracefully

Answer 4

The problem with using a custom font for icons is that you've got no backup plan if:

• Your user's browser is too old to support @font-face
• The user agent isn't your traditional browser (eg. Screen readers for the blind, search engines, HTML-to-text converters, etc.)
• The user copy-pastes the text containing the "icon" into something that discards rich formatting information or doesn't have the font in question.
• The user agent will never support @font-face (Eg. Textual web browsers like Lynx, Links2, and ELinks for Unix/Linux)

Images provide the alt attribute for just this reason.

However, if you're going to use a font for icons, make sure you store your glyphs in a Unicode Private Use Area. That'll mitigate the problem a bit by ensuring there's probably no conflict (Companies can and do sometimes use PUA glyphs to store custom data) and, if they're coded smartly, screen readers could know to gracefully ignore PUA glyphs.

As for implementing a fallback, I'd suggest using Modernizr (specifically, Modernizr.fontface) to test for support.