O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using Web-Safe Fonts

Problem

You want to specify fonts that are on most of your site visitors’ machines.

Solution

Use what are commonly referred as web-safe fonts, which are type files that are preinstalled on Macintosh and Windows operating systems.

Note

If you use Linux, you can install Microsoft TrueType fonts by installing the msttcorefonts package. For more information, see http://embraceubuntu.com/2005/09/09/installing-microsoft-fonts/.

Here are examples of sans serif web-safe font stacks:

font-family: Verdana, Geneva, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: "Trebuchet MS", Area, Helvetica, sans-serif;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Here are examples of serif web-safe font stacks:

font-family: Georgia, "Times New Roman", Times, serif;
font-family: "Palatino Linotype", "Book Antigua", Palatino, serif;
font-family: "MS Serif", New York, serif;

The following are monospace web-safe font stacks:

font-family: "Courier New", Courier, monospace;
font-family: "Lucida Console", Monaco, monospace;

This is a cursive web-safe font stack:

font-family: "Comic Sans MS", cursive;

Discussion

You can find approximately 13 fonts on both Windows and Macintosh operating systems, as shown in Table 3-2.

Table 3-2. Cross-platform fonts

Windows/Mac OS font

Font family

Example

Arial

Sans serif

image with no caption

Arial Black ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required