HTML - DOM Style Object fontFamily Property

Quiz

HTML DOM Style Object fontFamily property sets or returns a list of font-family names and generic-family names for text in an element. The browser implements the first value it recognizes. If there is whitespace in font-family name then it should be quoted.

Syntax

Set the fontFamily property:

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

Get the fontFamily property:

object.style.fontFamily;

Property Values

Value	Description
font1, font2, etc.	It specifies a list of font-family names and generic-family names separated by comma.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents font family property of element.

Example of HTML DOM Style Object 'fontFamily' Property

The following example sets the font family property of paragraph element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontFamily Property
    </title>
</head>
<body>
    <p>Click to change font family property of text.</p>
    <button onclick="fun()">Change Font</button>
    <button onclick="funTwo()">Change Font</button>
    <p id="font">Welcome to Tutorials Point.</p>
    <script>
        function fun() {
            document.getElementById("font")
                .style.fontFamily= "Brush Script MT, cursive";
        }
        function funTwo() {
            document.getElementById("font")
                .style.fontFamily= "Courier New, monospace";
        }
    </script>
</body>
</html>

Supported Browsers

Property
fontFamily	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page