CSS Property font-family

font-family defines a font family. A specific font family is dependent on availability on a user's machine.

CSS defines some generic fonts that are available everywhere. A summary of the generic font families:

Generic Font Family	Example Implementation Font
serif	Times
sans-serif	Helvetica
cursive	Zapf-Chancery
fantasy	Western
monospace	Courier

Summary

Item	Value
Initial value
Inherited	Yes.
Version	CSS1
JavaScript syntax	object.style.fontFamily="arial,sans-serif"
Applies to	All elements.

CSS Syntax

font-family: font 1 [, font 2, ... font N]

Property Values

The property values are listed in the following table.

Value	Description
family-name	A list of font family names and/or generic family names in prioritized order
inherit	Inherit the font family from the parent element

Browser compatibility


`font-family`	Yes	Yes	Yes	Yes	Yes

Example

The following code shows how to use different font names to set font-family.

p {font-family: Helvetica, Arial, sans-serif;} 
li {font-family: Times, TimesNR, "New Century Schoolbook", serif;} 
pre {font-family: Courier, Monaco, monospace;}

<!DOCTYPE HTML>
<html>
    <head>
        <style>
          p#serif {<!--  w w w.  ja  va2 s .c  o  m-->
            font-family: serif;  
          }
        </style>
    </head>
    <body>
    <p id='serif'>
      This is serif.
    </p>
    </body>
</html>

Click to view the demo

Choose font-family

The font-family property specifies the fonts that will be used, in order of preference.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            p { <!--from   w  ww .  j  av a2 s .  co m-->
                font-family: "HelveticaNeue Condensed", monospace; 
            } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
        </p> 
    </body> 
</html>

Click to view the demo