CSS Web Safe Font Combinations

January 10, 2020

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


  • Georgia, serif

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

  • "Times New Roman", Times, serif

Sans-Serif Fonts


  • 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


  • "Courier New", Courier, monospace

  • "Lucida Console", Monaco, monospace

Google Fonts