CSS Web Safe Font Combinations (Browsers)
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} |
View it » |
Below are some commonly used font combinations, organized by generic family.
Serif Fonts
font-family |
Example text |
Georgia, serif |
This is a heading
This is a paragraph |
"Palatino Linotype", "Book Antiqua", Palatino, serif |
This is a heading
This is a paragraph |
"Times New Roman", Times, serif |
This is a heading
This is a paragraph |
Sans-Serif Fonts
font-family |
Example text |
Arial, Helvetica, sans-serif |
This is a heading
This is a paragraph |
Arial Black, Gadget, sans-serif |
This is a heading
This is a paragraph |
"Comic Sans MS", cursive, sans-serif |
This is a heading
This is a paragraph |
Impact, Charcoal, sans-serif |
This is a heading
This is a paragraph |
"Lucida Sans Unicode", "Lucida Grande", sans-serif |
This is a heading
This is a paragraph |
Tahoma, Geneva, sans-serif |
This is a heading
This is a paragraph |
"Trebuchet MS", Helvetica, sans-serif |
This is a heading
This is a paragraph |
Verdana, Geneva, sans-serif |
This is a heading
This is a paragraph |
Monospace Fonts
font-family |
Example text |
"Courier New", Courier, monospace |
This is a heading
This is a paragraph |
"Lucida Console", Monaco, monospace |
This is a heading
This is a paragraph |
|