Every personal computer features a set of fonts installed by the computer manufacturer or they are the default fonts for the operating system that computer is using. It's possible to install more fonts of your choice.
Even so, not all font sets match. Installed set of fonts can vary from computer to computer. While designing a page, you should take this into account that casual computer users never distinguish the difference. If you stray from using the standard fonts that everyone has installed, the viewer won't see your fonts as intended. Often, the result is ugly text that is not at all pleasing to read.
To keep your site user friendly, you must use Web safe fonts. Web safe fonts are a set of highly common fonts that come installed on almost every computer.
There are four types of Web safe fonts: serif, sans serif, cursive, and monospace. Serif fonts have fine cross lines at the extremities of the letter that Sans serif fonts don’t have. Times New Roman is most common serif font and is default for most windows-based browsers and the most common sans serif font is Arial. Monospaced fonts have the same amount of space between the letters.
Web Safe Fonts Applicability
Web safe fonts should be used for your simple text headers, links, content and normal text for your logo. One of the few exceptions to using Web safe fonts is text in images. It's safe to use other fonts if you plan to use images for some of your text because images will appear same on the visitor's computer. But, you should never use images for all of your text.
Safe Web Fonts
Include Web safe fonts in your CSS with font or font-family rules.
There are a good number of Web safe fonts. Many of them look very similar to other Web safe fonts, and in practice they are the same. A CSS rule for your font family should be like:
font-family: Arial, Helvetica, sans-serif;
Though not specifically designed for the Web, Arial is an extremely common font available on most computers. Rarely a computer may not have Arial installed as in Apple computers. Helvetica, similar to Arial in width and spacing, is widely installed among Apple computers. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.
Hardly ever, some computers may not have Arial or Helvetica installed. In this case Web browser will use fallback default font "sans-serif" if it fails to find Arial or Helvetica.
Web safe fonts serif, sans serif, cursive, and monospace have their own fallback font: serif, sans-serif, cursive, and monospace respectively. Font rules nearly include one of these fallbacks, and always last.
Generally, serifs have been used mainly for headings. Below are the Web safe fonts that can be used for your serifs.
font-family: 'Bookman Old Style', serif;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: 'Times New Roman', Times, serif;
Sans Serif Web Safe Fonts
Sans serifs are typically used for the bulk of the content on a Web site.
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Symbol, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Monospace Web Safe Fonts
Monospace fonts are useful to confirm that all characters are lined up with exact same width as used in displaying code or tabular data without using a table.
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: 'Lucida Console', Monaco, monospace;
"Cursive" Web Safe Fonts
Presently, there aren't many Web safe cursive fonts. There is a "cursive" fallback, like sans-serif, serif, and monospace, but is highly unused. There's a debate whether Comic Sans MS is a compatible match with the cursive fallback font. In any case, cursive and Comic Sans MS are typically avoided.
font-family: 'Comic Sans MS', cursive;
Exceptions to the rule
There are some exceptions to the Web safe fonts rule. Every so often, due to circumstances out of your control, you simply must use a non web safe font. Below are the best ways to use non-web-safe fonts in your page and to get them displayed properly on most computers.
Offer font-file download
Different people have different fonts installed. If you are inclined to use a very specific font for your site, include a link to the font file on your page. This way, visitors can download and install the font, visit your page and see the font rendered well with no drawbacks.
The visitor is expected to undergo the trouble of downloading and installing just to view your site as you want him to see it. It is a great way to lose visitors especially when they don’t want to anything except viewing your page. Most of them won't even know where to begin installing the font.
There are also some possible legal issues if you take this route. If you are not the creator of the font, then you do not have the legal rights to distribute it.
Because of these major flaws, this method is widely avoided.
Images
When you use an image editor like Photoshop, The GIMP, or MS Paint, you can create images that use any font you like for your logo, advertisements or some of your headers. Put the image on your page and it will look the same on a visitor's computer as it does on yours. Below is an image that uses non-Web-safe fonts.
Whether a visitor is using a Mac, a Windows PC, Linux, a PDA or iPhone, the fonts above show up properly even if the PC doesn't have these fonts installed.
But you cannot rely on images for actual content. A visitor cannot highlight if he wants to copy and paste your text somewhere. Also, text in images cannot be read by screen readers used by handicapped people for that text will not be available to them. Some people browse with images turned off or have their images blocked by a third party, as in some corporate offices. Finally, search engines cannot properly read and catalogue text in images.
Scalable Inman Flash Replacement
sIFR is a dynamic text replacement method of using rich, beautiful fonts on your page for headers, quotes, slogans, and other small but important bits of text.. It converts any text you select on a page to any font you choose. It will strengthen your site's typography and you will get a scalable, accessible text in a font of your choosing by dropping a Flash element with a transparent background instead of your original text. If a visitor to your site doesn't have javascript and Flash, your text will be displayed in a CSS-styled, normal header.
Below is a table listing out all of the most common fonts and what operating systems they usually come with.
*The orange marks show very common fonts, the black shows not so common but all are generally accepted as web safe.