CSS WEB SAFE FONTS

Why Choose Web Safe Fonts

It may be a situation when the fonts you are trying to use on your web pages are not appeared as it should be, because all fonts are not available on all computer system.

To ensure the exact rendering of your text on most of the browser or operating systems you have to define your fonts very carefully. The font-family CSS property can hold several font names as a fallback system. Start with the font that you want first, then the fonts you might want to fill in for the first if it is not available.

You should always end the list with a generic font family, which are five: serifsans-serifmonospacecursive and fantasy. The generic font family allows the browser to select a similar font, if no any fonts defined by your are available.

The following table lists the font’s combinations that are most safe to use.

font-familyNormalBold
Arial, Helvetica, sans-serifThis is normal text.This is bold text.
“Times New Roman”, Times, serifThis is normal text.This is bold text.
“Courier New”, Courier, monospaceThis is normal text.This is bold text.

The following example shows you how to set the font-family property in correct manner.

EXAMPLE

1.	.sans-serif-font {
2.	    font-family: Arial, Helvetica, sans-serif;
3.	}
4.	.serif-font {
5.	    font-family: "Times New Roman", Times, serif;
6.	}
7.	.monospace-font {
8.	    font-family: "Courier New", Courier, monospace;
9.	}

Commonly Used Font Combinations

The following table lists some commonly used font combinations, organized by generic family.

Serif Fonts

font-familyNormalBold
Georgia, serifThis is normal text.This is bold text.
“Times New Roman”, Times, serifThis is normal text.This is bold text.
“Palatino Linotype”, Palatino, “Book Antiqua”, serifThis is normal text.This is bold text.

Sans-Serif Fonts

font-familyNormalBold
Arial, Helvetica, sans-serifThis is normal text.This is bold text.
“Arial Black”, Gadget, sans-serifThis is normal text.This is bold text.
Impact, Charcoal, sans-serifThis is normal text.This is bold text.
Tahoma, Geneva, sans-serifThis is normal text.This is bold text.
“Trebuchet MS”, Helvetica, sans-serifThis is normal text.This is bold text.
Verdana, Geneva, sans-serifThis is normal text.This is bold text.

Monospace Fonts

font-familyNormalBold
Courier, monospaceThis is normal text.This is bold text.
“Courier New”, Courier, monospaceThis is normal text.This is bold text.
“Lucida Console”, Monaco, monospaceThis is normal text.This is bold text.

Cursive Fonts

font-familyNormalBold
“Comic Sans MS”, cursiveThis is normal text.This is bold text.
“Courier New”, Courier, monospaceThis is normal text.This is bold text.
“Lucida Console”, Monaco, monospaceThis is normal text.This is bold text.

Fantasy Fonts

There are no fantasy fonts that have good availability across browsers and operating systems.

Categories: CSS