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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content