Is it good for accessibility and usability if we only use web-safe fonts in website design?

Question

Should we use default web safe fonts as much as possible, should try to make good design with web safe fonts only?

Show we avoid fancy fonts in design which would be only possible with any image replacement techniques, sIFR, @Font-face, Typeface etc.

for better site maintenance, accessibility, usability

Answer 1

I'd say to take advantage of @font-face and the like, but definitely have a safe set of fallback fonts. As long as you do that, you can't go wrong, since layout never really depends on font.

Answer 2

Yes, you should use "web-safe" fonts. Always include a "general" font specifier at the end of your declaration, like

font-family: Arial, Helvetica, Geneva, sans-serif;

If you use images for textual elements like drop caps, for example, those won't be picked up by screen readers and, worse, will put another image on the page for which the screen reader will expect an alt attribute.

Answer 3

I'm not sure keeping to web-safe fonts is more accessible, usable or maintainable. But it definitely is good practice. And depending on which fonts you choose, you will get the benefit that they are fairly readable.

The general reason to stick with 'web-safe' fonts is that you can be fairly sure that the user will have it (or one of them). This gives you a good idea of exactly how your webpage will look when viewed on different operating systems / browsers / etc. Important because in some designs, differently proportioned fonts can cause havoc with the overall layout of the page.

It's also worth ensuring (because operating systems don't generally share too many fonts between them) that you specify a number of different font's via the CSS attribute font-family. E.g:

.sample_style
{ 
  font-family: Arial, Helvetica, sans-serif;
}

Accessibility guidelines do state however, that you should avoid using images to display text. This is a great rule of thumb, as not everyone can see images (search engines and the visually impaired). So if you want the content of your image to be 'seen' by everyone, use proper tagging (e.g. alt and title attributes on img tags, or careful CSS / JavaScript work to hide or display your image / text accordingly.