Style fontFamily attribute

Definition and Usage

fontFamily This attribute sets or returns a list of the font family (font-family) names and/or generic family (generic-family) names of the text in 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 a font family, such as "verdana" or "arial"
  • generic-family: The name of a 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 Fontsfor 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

Returns 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 Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: Not specified
Return value: A string representing the font name of the element's text.
CSS Version: CSS1

Browser Support

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