I wonder if it's safe to use font-face with special dingbats fonts. What are good dingbats that you can recommend to use this way? What are the tips and tricks? Thanks.


I wonder if it's safe to use font-face with special dingbats fonts.

It's not - have a look at this article for more information. The article presents a simple example:

<button type="submit">Purchase <span class="icon">6</span></button>

The main problems, as mentioned in the article, are two fold:

  • Users with browsers that render the text in fallback font before the @font-face font files are fully loaded, will see the plain text, which is highly undesirable, since something like 6 turning into a shopping cart would make no sense to the user
  • More importantly, this will be a big usability problem for disabled users using text-to-speech programs - hearing Purchase Six just doesn't make sense.

The authors goes on to talk about possible solutions, but conclude that there is no real way around all of the problems presented.

| improve this answer | |
  • Why does having JavaScript disabled matter in that example? – Lèse majesté Dec 28 '10 at 9:04
  • @Lèse You're right, I can't believe I made that fundamental mistake. @font-face doesn't usually depend on JavaScript – Yi Jiang Dec 28 '10 at 9:17
  • Yea, I thought I was missing something in the example. That's a good article, but I'm thinking there might be a solution to this if instead of using a Dingbat font, you use a standard font and simply use the "Symbols & Dingbats" subrange for characters like U+2709 (envelope) or U+270E (lower-right pencil). Alternatively, you could create your own dingbat characters in the "Private Use Characters" subrange and name them appropriately. Though I'm not sure if screen readers know to read custom glyphnames from the font. – Lèse majesté Dec 28 '10 at 10:11
  • 1
    @Lèse I would think that this is only interesting as an experiment - using the font files as a carrier for vector images does seem very intersting - but unless you're going to use the dingbats extensively at many different sizes I don't see what advantages this has over using a png sprite map - and this is assuming the accessibility problems can even be worked out. – Yi Jiang Dec 28 '10 at 10:54
  • True. I do see some value in using the standard Unicode dingbats instead of icons (I've seen this a lot with the "X" and "checkmark" symbols), or using dingbats so that CSS3 text effects can be used on the icons, but it's probably not practical in most instances. – Lèse majesté Dec 29 '10 at 0:32

@Yi Jiang is right about usability issues.

Of course, if you use a bullet proof @font-face, the chances of getting errors are very reduced. The main issue however remains for screen-readers and text-browsers.

One more consideration is: downloading fonts instead of just one single symbol or image does not really save bandwidth nor loading time (unless you need them in many different sizes). The best saving technique so far is CSS sprites, with a nice image file (high quality, high compression).

| improve this answer | |

This is actually a great technique in many situations. If you are developing a flexible base design that is meant to be extensible you can use it across hundreds of sites, for example a WordPress theme, and use css to change the colors, size of the icons dynamically this is a great way to accomplish this. What you can also do with this is have a few different symbol fonts with different looks that all have the letters matching up to the same icons (ex. 'A' = home icon on both fonts etc) so you can easily change the look very quickly. There are tons of techniques to help with the browser issues and accessibility issues. Done properly you can take steps to make sure screen readers ignore the symbol and also make sure almost all browsers recognize the font without JavaScript.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.