CSS Web Safe Font Combinations

« Previous Chapter Next Chapter »

Commonly Used 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:

Example

p{font-family:"Times New Roman", Times, serif}
Code it Online »

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

Serif Fonts

font-family Example text
Georgia, serif

A heading

A paragraph

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

A heading

A paragraph

"Times New Roman", Times, serif

A heading

A paragraph

Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif

A heading

A paragraph

Arial Black, Gadget, sans-serif

A heading

A paragraph

"Comic Sans MS", cursive, sans-serif

A heading

A paragraph

Impact, Charcoal, sans-serif

A heading

A paragraph

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

A heading

A paragraph

Tahoma, Geneva, sans-serif

A heading

A paragraph

"Trebuchet MS", Helvetica, sans-serif

A heading

A paragraph

Verdana, Geneva, sans-serif

A heading

A paragraph

Monospace Fonts

font-family Example text
"Courier New", Courier, monospace

A heading

A paragraph

"Lucida Console", Monaco, monospace

A heading

A paragraph


« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!