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 FamilyExample Implementation Font
serifTimes
sans-serifHelvetica
cursiveZapf-Chancery
fantasyWestern
monospaceCourier




Summary

ItemValue
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-nameA 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