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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > face (basefont, font)

face property (basefont, font)

Browser support:

Specifies or returns the font face for a page or for a font element.

This property is deprecated. Use the fontFamily style property instead. You can find a detailed description there.

Syntax:

object.face;

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

This property is read/write.

HTML page for this property: face

Possible values:

String that sets or retrieves a comma-separated list of font names.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the face attribute:

Original font face
<basefont size="4" face="sans-serif" />Font face for the whole page
<font face="Arial" size="2">modified with FONT element</font>
Normal text fragment in the document body

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<body style="font-family:sans-serif; font-size:14px">
    Font face for the whole page
    <span style="font-family:arial; font-size:10px">
        modified with SPAN element
    </span>
    Normal text fragment in the document body
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the face property:

<head>
    <script type="text/javascript">
        function ChangeFace () {
            var baseFont = document.getElementById ("myBaseFont");

            if ('face' in baseFont) {
                baseFont.face = "courier";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    Original font face
    <basefont id="myBaseFont" size="4" face="sans-serif" />Font face for the whole page
    <font face="Arial" size="2">modified with FONT element</font>
    Normal text fragment in the document body

    Click this button to change font face
    <button onclick="ChangeFace ();">Change face to courier!</button>
</body>