CSS Web Safe Font Combinations

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

p {
  font-family: "Times New Roman", Times, serif;
}

Below are some commonly used font combinations, organized by generic family.

Serif Fonts

font-family

• Georgia, serif

• "Palatino Linotype", "Book Antiqua", Palatino, serif

• "Times New Roman", Times, serif

Sans-Serif Fonts

font-family

• Arial, Helvetica, sans-serif

• "Arial Black", Gadget, sans-serif

• "Comic Sans MS", cursive, sans-serif

• Impact, Charcoal, sans-serif

• "Lucida Sans Unicode", "Lucida Grande", sans-serif

• Tahoma, Geneva, sans-serif

• "Trebuchet MS", Helvetica, sans-serif

• Verdana, Geneva, sans-serif

Monospace Fonts

font-family

• "Courier New", Courier, monospace

• "Lucida Console", Monaco, monospace

Google Fonts