In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > fontFamily

fontFamily style property

Browser support:

Specifies or returns the font face for text.

The fontFamily property is a comma separated list of font family names.

There are generic family names and others. The generic family names are supported by all browsers on all platforms, other family names are not necessarily. If you specify more than one font family, the browser will use the first from left to right that can be recognized. For that reason, always use a generic family name at the last position of the fonts. Family names containing whitespace must be quoted!

Syntax:

object.fontFamily;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: font-family

Possible values:

The type of this property is string.

One of the following values:

•

Any of the following values (use the , character to separate them, each value can be used arbitrary times):

•	Non-generic font family
•	serif
•	sans-serif
•	cursive
•	fantasy
•	monospace

•

inherit

Description of values:

cursive

Some cursive fonts: Adobe Poetica, Caflisch Script, Sanvito, ...

fantasy

Some fantasy fonts: Alpha Geometrique, Critter, Cottonwood, ...

inherit

Takes the value of this property from the computed style of the parent element.

monospace

Some monospace fonts: Courier, MS Courier New, Prestige, ...

Non-generic font family

for example: Arial, Tahoma, 'Times New Roman', Verdana, -moz-fixed, ...

sans-serif

Some sans-serif fonts: MS Arial, MS Tahoma, MS Verdana, Helvetica, ...

serif

Some serif fonts: Times New Roman, MS Georgia, Bodoni, Garamond, ...

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the font-family property:

<head>
    <style>
        .example1 {
            font-family: Tahoma, Verdana, serif;
        }
        .example2 {
            font-family: Verdana, "Times New Roman", sans-serif;
        }
    </style>
</head>
<body>
    <span class="example1">font-family: Tahoma, Verdana, serif;</span>
    <br />
    <span class="example2">font-family: Verdana, "Times New Roman", sans-serif;</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the fontFamily property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeFont (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var selectState = selectTag.options[whichSelected].text;

            var fontTest = document.getElementById ("fontTest");
            fontTest.style.fontFamily = selectState;
        }
    </script>
</head>
<body>
    <span id="fontTest">
        Sample multiline text <br />change it!
    </span>

    <br />
    <select onchange="ChangeFont (this);" size="7">
        <option />gill
        <option />helvetica
        <option />cursive
        <option />fantasy
        <option selected="selected" />serif
        <option />sans-serif
        <option />monospace
    </select>
</body>