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

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

font style property

Browser support:

Specifies or returns up to six separate font properties, in a shorthand form.

The font property allows you to specify what kind of letter is used for the visual representation of the element. You can change the style, weight, size, the font family, and more, but if you want to change the color of the text, you must use the color property.

Specifying more than one font-family is recommended, because different font family names are supported by different platforms. For details, see the page for the fontFamily property. These features can be set with six different style properties too, listed below. The use of separate properties is highly recommended for non-advanced authors for better controllability.

If you want to get font features from JavaScript, use the six stand-alone properties for cross-browser compatibility. To set the features, you can use all seven properties.

Syntax:

object.font;

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

This property is read/write.

CSS page for this property: font

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

Any of the following values (use the space character to separate them, each value can be used only once):

•	<font-style>
•	<font-variant>
•	<font-weight>

possible but not necessary; left to personal choice

Values in this order (use the / character to separate them):

<font-size>

<line-height>

<font-family>

•

caption

•

icon

•

message-box

•

small-caption

•

status-bar

•

-moz-button

•

-moz-info

•

-moz-desktop

•

-moz-dialog

•

-moz-document

•

-moz-workspace

•

-moz-window

•

-moz-list

•

-moz-pull-down-menu

•

-moz-field

•

-webkit-control

•

-webkit-mini-control

•

-webkit-small-control

•

inherit

Description of values:

-moz-button

The font used in buttons.

-moz-desktop

The font used on the desktop.

-moz-dialog

The font used in dialogs.

-moz-document

The font used in documents.

-moz-field

The font used in fields.

-moz-info

The font used in info.

-moz-list

The font used in lists.

-moz-pull-down-menu

The font used in pull-down-menus.

-moz-window

The font used in windows.

-moz-workspace

The font used in workspaces.

-webkit-control

The font used in controls.

-webkit-mini-control

The font used in mini controls.

-webkit-small-control

The font used in small controls.

caption

The font used for objects that have captions.

font-family

Specifies or returns the font face for text.

font-size

Specifies or returns the font size of the text.

font-style

Specifies or returns whether the style of the font is normal, italic or oblique.

font-variant

Specifies or returns a variation of the specified or default fontFamily.

font-weight

Specifies or returns the font weight of the text.

icon

The font used to icon labels.

inherit

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

line-height

Specifies or returns the distance between lines of text in a block-level element.

The font used in menus.

message-box

The font used in dialog boxes.

small-caption

The font used in small controls.

status-bar

The font used in window status bars.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the font property:

<head>
    <style>
        .example {
            font: italic normal 600 medium/1.2em serif;
        }
    </style>
</head>
<body>
    <a class="example">font: italic normal 600 medium/1.2em serif</a>
</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 font property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeFont () {
            var selectTags = document.getElementsByTagName ("select");
            var fontValue = "";
            
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Returns the selected options values
                fontValue += selectTags[i].options[whichSelected].text + " ";
            }

            var anchor = document.getElementById ("myAnchor");
            anchor.style.font = fontValue;
        }
    </script>
</head>
<body>
    <a id="myAnchor" style="font: italic normal 600 medium/1.2em serif">
        Sample multiline text <br />with the specified font
    </a>

    <br />
    font-style:
    <select onchange="ChangeFont ();" size="3">
        <option selected="selected" />italic
        <option />normal
        <option />oblique
    </select>
    font-variant:
    <select onchange="ChangeFont ();" size="2">
        <option selected="selected" />normal
        <option />small-caps
    </select>
    font-weight:
    <select onchange="ChangeFont ();" size="13">
        <option />bold
        <option />bolder
        <option />lighter
        <option />normal
        <option />100
        <option />200
        <option />300
        <option />400
        <option />500
        <option selected="selected" />600
        <option />700
        <option />800
        <option />900
    </select>
    font-size:
    <select onchange="ChangeFont ();" size="9">
        <option />xx-small
        <option />x-small
        <option />small
        <option />smaller
        <option selected="selected" />medium
        <option />larger
        <option />large
        <option />x-large
        <option />xx-large
    </select>
    line-height:
    <select onchange="ChangeFont ();" size="10">
        <option />/0.2
        <option />/0.5
        <option />/0.8
        <option />/1
        <option selected="selected" />/1.2
        <option />/1.5
        <option />/1.8
        <option />/2.1
        <option />/2.4
        <option />/3
    </select>
    font-family:
    <select onchange="ChangeFont ();" size="7">
        <option />gill
        <option />helvetica
        <option />cursive
        <option />fantasy
        <option selected="selected" />serif
        <option />sans-serif
        <option />monospace
    </select>
</body>