CSS font-family Property


Example

Specify the font for two paragraphs:

p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}
Try it Yourself »

Definition and Usage

The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

  • family-name - The name of a font-family, like "times", "courier", "arial", etc.
  • generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Show demo ❯

Default value: depends on the browser
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.fontFamily="Verdana,sans-serif" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-family 1.0 4.0 1.0 1.0 3.5


CSS Syntax

font-family: family-name|generic-family|initial|inherit;

Property Values

Value Description Demo
family-name / generic-family A prioritized list of font family names and/or generic family names Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontFamily property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.