: Symbol fonts using in page design 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

@Sherry384

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.

Vote Up Vote Down

@YK1175434

@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).

Vote Up Vote Down

@Welton855

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.

Vote Up Vote Down