CSS Web Safe Font Combinations
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
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
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
|
