Style fontFamily Property
Example
Set the font for an element:
document.getElementById("demo").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
| Property | |||||
|---|---|---|---|---|---|
| fontFamily | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the fontFamily property:
object.style.fontFamily
Set the fontFamily property:
object.style.fontFamily = "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
Example
A demonstration of possible values:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("demo").style.fontFamily = listValue;
Try it Yourself »
Example
Return the font of an element:
alert(document.getElementById("demo").style.fontFamily);
Try it Yourself »
Related Pages
CSS tutorial: CSS Font
CSS reference: font-family property
HTML DOM reference: font property
