Style fontFamily attribute

Definition and usage

fontFamily Attribute sets or returns a list of the font family (font-family) names and/or generic family (generic-family) names in the text of the element.

The browser will use the first value it can recognize.

There are two types of font-family values:

  • font-family: The name of the font family, such as "verdana" or "arial"
  • generic-family: The name of the generic font family, such as "serif" or "sans-serif"

Tip

Always specify the generic family name as the last choice!

Please separate each value with a comma.

If the font family name contains spaces, it must be enclosed in quotes.

See Web Safe Fontsto learn about common font combinations.

See also:

CSS Tutorial:CSS font

CSS Reference Manual:font-family attribute

HTML DOM Reference Manual:font attribute

Example

Example 1

Set the font of the <p> element:

document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";

Try it yourself

Example 2

Demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myP").style.fontFamily = listValue;

Try it yourself

Example 3

Return the font of the <p> element:

alert(document.getElementById("myP").style.fontFamily);

Try it yourself

Syntax

Return fontFamily attribute:

object.style.fontFamily

Set fontFamily attribute:

object.style.fontFamily = "font1, font2...|initial|inherit"

Attribute value

Value Description
font1, font2... A comma-separated list of font family names and/or generic family names.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: Not specified
Return value: String, representing the font name of the element's Chinese text.
CSS version: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support