Font-Family

Set a prioritized list of font family names and/or generic font family names for the text of an element.

Syntax
      font-family: font1,font2,font3...,GenericFont ;
      font-family: inherit ;

The user agent/browser will display the text using the first font in the list which is available. To guarantee that at least one of the fonts will be available, a generic family name should be added as the last value in the list. (A generic font will automatically select a suitable installed font.)

Generic family names:
cursive  a cursive script font, an example of cursive script.
fantasy  a special, decorative font (CSS2.1+) an example of fantasy.
monospace  a monospaced font, an example of monospace.
sans-serif  a font without serifs (like Arial) an example of sans-serif.
serif  a font with serifs (like Times) an example of serif.
inherit - inherit from the parent element.

If a font name includes spaces then surround the "full name" with quotes. From the CSS 2.1 spec: To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens. Generic font-families, such as monospace should not be quoted.

Family names, being CSS keywords, are always case insensitive. Font family names may be case sensitive on some early operating systems, the CSS 3 specification requires that font-names be treated case-insensitively.

The on screen appearance of a font may also be affected by OS font smoothing and ClearType.

Examples:
h1 { font-family: Helvetica,Verdana,sans-serif ;}
#ss64id { font-family: "Courier New", monospace;
}
.ss64class { font-family: Palatino, "Palatino Linotype", Georgia, Times, serif; }

Try it:

The 'Try It' control will change the appearance of this text.

A greater difference in legibility can be found within members of the same type family than between a serif and a sans-serif typeface. Factors such as x-height, counter size, letter spacing and stroke width will affect readability.

Possibly ambiguous characters:
|!1lIi
0Oo
,.;:_-=+`'"
(){}[]

(CSS1) Browser Support: All major browsers

“A man cannot leave a better legacy to the world than a well-educated family” ~ Thomas Scott

Related:

Font Stacks - CSS Tricks.
Common fonts - for all versions of Windows & OS X
Font-Stack-Builder - See the probability that a font will be displayed.
font-size - Font size of text.
font-style - Font style for text.
font-variant - Whether or not text should be displayed in a small-caps font.
font-weight - Normal, bold, bolder.
font - Shorthand to set the font properties above in one declaration.


© Copyright SS64.com 1999-2014
Some rights reserved