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-facefont files are fully loaded, will see the plain text, which is highly undesirable, since something like
6turning 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 Sixjust 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.
@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).