Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required