CSS Font Family
The font-family property specifies the font for an element.
There are two types of font family names:
– font family: a specific font family (like Times New Roman or Arial)
– generic family: a group of font families with a similar look (like Serif or Monospace)
Here is an example of different font styles:
The HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> |
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
p.serif { font-family: "Times New Roman", Times, serif; } p.sansserif { font-family: Helvetica, Arial, sans-serif; } p.monospace { font-family: "Courier New", Courier, monospace; } p.cursive { font-family: Florence, cursive; } p.fantasy { font-family: Blippo, fantasy; } |
Separate each value with a comma to indicate that they are alternatives.
If the name of a font family is more than one word, it must be in quotation marks: “Times New Roman”.
The font-family property should hold several font names as a “fallback” system. When specifying a web font in a CSS style, add more than one font name, in order to avoid unexpected behaviors. If the client computer for some reason doesn’t have the one you choose, it will try the next one.
It is a good practice to specify a generic font family, to let the browser pick a similar font in the generic family, if no other fonts are available.
If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue, then Helvetica). If the browser doesn’t have any of them, it will try the generic sans-serif.
|
1 2 3 |
body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } |
If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue, then Helvetica). If the browser doesn’t have any of them, it will try the generic sans-serif.
