HTML DOM Style fontFamily Property

Style fontFamily Property

❮ Style Object


Set the font for a <p> element:

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

Definition and Usage

The fontFamily property sets or returns a list of font-family names and/or generic-family names for text in an element.

The browser will use the first value it recognizes.

There are two types of font-family values:

  • font-family: The name of a font-family, like "verdana" or "arial"
  • generic-family: The name of a generic font-family, like "serif" or "sans-serif"

Tip: Always specify a generic-family name as the last alternative!

Note: Separate each value with a comma.

Note: If a font-family name contains whitespace, it must be quoted.

Tip: Look at Web safe fonts for commonly used font combinations.

Browser Support

fontFamily Yes Yes Yes Yes Yes


Return the fontFamily property:

Set the fontFamily property: = "font1, font2, etc.|initial|inherit"

Property Values

Value Description
font1, font2, etc. A comma-separated list of font-family names and/or generic-family names
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: not specified
Return Value: A String, representing the font name of the text in the element
CSS Version CSS1

More Examples


A demonstration of possible values:

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


Return the font of a <p> element:

Try it Yourself »

Related Pages

CSS tutorial: CSS Font

CSS reference: font-family property

HTML DOM reference: font property

❮ Style Object