font-family - HTML CSS CSS Property

HTML CSS examples for CSS Property:font-family

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font-family

Description

The font-family CSS property sets the font for text content.

The font-family property should have several font names as a "fallback" options.

You start the font family with the font that you want first, then any fonts that might fill in for the first if it is unavailable.

You should end the lit with a Generic font family, which are five: serif, sans-serif, monospace, cursive and fantasy.

The following table summarizes the font-family Property.

Item Value
Default value: Depends on the browser
Applies to:All elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


font-family:     [ family-name | generic-family ] [, family-name | generic-family ]one or more pairs | initial | inherit

If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman", Serif; etc.

Property Values

The following table describes the values of this property.

Value Description
family-nameThe name of a font family.
generic-family Generic font families can be used as a general fallback mechanism.
initialSets this property to its default value.
inherittake the value of its parent element font-family property.

The example below shows the font-family property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS font-family property</title>
  <style type="text/css">
    body {<!--from   w ww .ja  v a  2  s. c  om-->
      font-family: Arial, Helvetica, sans-serif;
    }
    h1 {
      font-family: "Times New Roman", Times, serif;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials