HOLLA TECH - LEARN

The font-family Property
 

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: 

Holla Tech - Learn CSS

The HTML:

<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:

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;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
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
 

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.

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.

NOTE!
Remember to use quotation marks if the font name consists of more than one word.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT