CSS Fonts (Fallback Fonts for Fonts)

Commonly Used Font Fallbacks

There are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly. Therefore, it is very important to always use fallback fonts.

This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

Font Fallbacks ensures that if the specified font is not supported in the user's browser (device), then the generic font is used in place of the specified font.

The List of fonts are separated by comma, in which the first font is the specified font and followed to the last font, that is generic font, specified below:

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Serif Fonts

font-family	Example text	Code
"Times New Roman", Times, serif	This is a Heading This is a paragraph.
Georgia, serif	This is a Heading This is a paragraph.
Garamond, serif	This is a Heading This is a paragraph.

Sans-Serif Fonts

font-family	Example text	Code
Arial, Helvetica, sans-serif	This is a Heading This is a paragraph.
Tahoma, Verdana, sans-serif	This is a Heading This is a paragraph.
"Trebuchet MS", Helvetica, sans-serif	This is a Heading This is a paragraph.
Geneva, Verdana, sans-serif	This is a Heading This is a paragraph.

Monospace Fonts

font-family	Example text	Code
"Courier New", Courier, monospace	This is a Heading This is a paragraph.

Cursive Fonts

font-family	Example text	Code
"Brush Script MT", cursive	This is a Heading This is a paragraph.

Fantasy Fonts

font-family	Example text	Code
Copperplate, Papyrus, fantasy	This is a Heading This is a paragraph.