English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS font-Usage and examples of the family attribute

font-The family CSS property is used to set the font of the text content of the element. The font-The family attribute should contain multiple font names as a 'fallback' system. Start with the required font and then use fallback fonts in order if the required font is not available.

You should use a generic font family to end this list, which has5a font, such as: arial, sans-serif, monospace, cursive, fantasy. The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts. monospacecursive

Default value:Depends on the browser
Applies to:All elements
Inheritance:Yes
Animatable:No.See also Animation properties.
Version:CSS 1,2,3
JavaScript syntax:object.style.fontFamily="arial,sans-serif"

font-Syntax of family usage

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use the font-family attribute.

  body {
   font-family: Arial, Helvetica, sans-serif;
  }
  h1 {
   font-family: "Times New Roman", Times, serif;
  }
Test to see‹/›

Note:If the name of the font family contains more than one word, it must be enclosed in quotes, for example, font-family: "Times New Roman", Serif; etc.

For more commonly used font combinations, please seeCSS secure web font.

Attribute value

The following table describes the value of this attribute.

ValueDescription
family-nameThe name of the font family. For example, "Times" and "Helvetica". Font names containing spaces should be enclosed in double quotes.
generic-family

When it is not possible to use the required font selection, the generic font family can be used as a conventional fallback mechanism. Since the generic font names are keywords, they cannot be enclosed in quotes.

The generic font family should be the last choice in the list of font family names. The following generic series are defined:

  • serif (e.g., Times)

  • sans-serif (e.g., Arial)

  • cursive (e.g., Zapf-Chancery)

  • fantasy (e.g., Western)

  • monospace (e.g., Courier)

Learn more aboutFont combinationMore information.

initialSet this attribute to its default value.
inheritIf specified, the associated element uses its parent element's 'font'-The 'family' attribute value.

Browser compatibility

font-Browser compatibility of the 'family' attribute, the numbers in the following table represent the minimum version number of the browsers that support this attribute; all mainstream browsers support this attribute.

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 3+

  • Apple Safari 1+

  • Opera 3.5+

Further reading

Please refer to the following tutorials:CSS font,CSS text.

Related attributes and rules:font,font-style,font-variant,font-weight,font-size,
line-height,@font-face.