Font-family part 2

CSS Fundamentals
Working with Text
font-family
28
2/2
     

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. 
Remember to use quotation marks if the font name consists of more than one word.

Comments

Post a Comment

Popular posts from this blog

font-family part 1

Image
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: 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: ...
Read more