CSS - font Property

CSS font is a shorthand property for setting a number of font properties such as font-size,font-variant,font-weight,font-size,font-family etc. in one go, the font-size and font-family are required parameters. If some value is missing then the default value is used.

Syntax

font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Property Values

Value	Description
font-style	It specifies the font style. Default value is normal.
font-variant	It specifies the font variant. Default value is normal.
font-weight	It specifies the font weight. Default value is normal.
font-size	It specifies the font size and the line-height. Default value is normal.
font-family	It specifies the font family. The default value depends on the browser.
caption	It uses that font that are used by captioned controls such as buttons, drop-downs, etc.
icon	It uses the font that are used by icon labels.
menu	It uses the fonts that are used by dropdown menus.
message-box	It uses the fonts that are used by dialog boxes.
small-caption	This is smaller version of the caption font.
status-bar	It uses the fonts that are used by the status bar.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Font Property

The following examples explain the font property with its individual components.

Setting Font Style of the Text

To set the font style of the text, we use the font-style component of the font property. Different values can be given to the font-style component, accordingly the text will be modified. In the following example, italic value has been used with font-style component of font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font-style: italic;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This text is without the font style property.</p>
    <div id="font">
        This text is shows the font-style property.
    </div>

</body>

</html>

Setting Font Variant of the Text

To set the font variant of the text, which specifies whether or not a text should be displayed in a small-caps font or not, we use the font-variant component of the font property. In the following example, small-caps value has been used with font-variant component of font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font-variant: small-caps;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This text is without the font variant property.</p>
    <div id="font">
        This text shows the font variant property.
    </div>

</body>

</html>

Setting Font Weight of the Text

To set the font weight of the text, which specifies how bold the text should be, we use the font-weight component of the font property. Different values can be given to the font-weight component, accordingly the text will be modified. In the following example, bolder value has been used with font-weight component of font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font-weight: bolder;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This text is without the font weight property.</p>
    <div id="font">
        This text shows the font weight property.
    </div>

</body>

</html>

Setting Font Size of the Text

To set the font size of the text, which specifies how large the text should be, we use the font-size component of the font property. Different values can be given to the font-size component, accordingly the text will be modified. In the following example, larger value has been used with font-size component of font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font-size: larger;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This text is without the font size property.</p>
    <div id="font">
        This text shows the font size property.
    </div>

</body>

</html>

Setting Font Family of the Text

To set the font family of the text, which specifies the typography of the text, we use the font-family component of the font property. Different values can be given to the font-family component, accordingly the text will be modified. In the following example, Impact value has been used with font-family component of font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font-family: Impact;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This text is without the font family property.</p>
    <div id="font">
        This text shows the font family property.
    </div>

</body>

</html>

Setting all Values at Once

To set all the values (font-style, font-variant, font-weight, font-size and font-family) at once,we use the font property. In the following example, font style is italic, font variant is small-caps, font weight is bold, font size is 30px and font family is Times New Romans.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:italic small-caps bold 30px Times New Romans;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <p>This is normal text.</p>
    <div id="font">
        This text shows the font property.
    </div>

</body>

</html>

Setting Font for Captions

To set the font for captioned controls such as buttons, drop-downs etc. we use the caption value of the font property. In the following example, caption value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font: caption;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        The caption value is used for captions.
    </div>

</body>

</html>

Setting Font for Icon Labels

To set the font used by icon labels, we use the icon value of the font property. In the following example, icon value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:icon;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        This icon value is used for icon labels.
    </div>

</body>

</html>

Setting Font for Dropdown Menus

To set the font used by dropdown menus,we use the menu value of the font property. In the following example, menu value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:menu;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        The menu value is used for dropdown menus.
    </div>

</body>

</html>

Setting Font for Message Box

To set the font for message box, we use the message-box value of the font property. In the following example, message-box value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:message-box;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        The message box is value is used for dialog boxes.
    </div>

</body>

</html>

Setting Small Font for Caption

To set small font for the caption, we use the small-caption value of the font property. In the following example, small-caption value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:small-caption;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        The small-caption value is a smaller version of caption value.
    </div>

</body>

</html>

Setting Font for Status Bar

To set the font for status bar, we use the status-bar value of the font property. In the following example, status-bar value has been used with font property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #font {
            font:status-bar;
        }
    </style>
</head>

<body>

    <h2>CSS font property</h2>
    <div id="font">
        The status-bar value is used for status bars.
    </div>

</body>

</html>

Supported Browsers

Property
font	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page