CSS - font-feature-settings Property

Quiz

CSS font-feature-settings property controls the advanced typographic features in OpenType fonts, such as swashes, small caps and ligatures etc.

Syntax

font-feature-settings: normal | feature-tag-value | initial | inherit;

Property Values

Value	Description
normal	The default font settings are laid out. Default.
feature-tag-value	A space separated tuple, having a tag name and an optional value. Tag name is always a <string> of four ASCII characters, else it is invalid. Optional value can be an integer or keyword on(1) or off(0). Default is 0.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Font Feature Setting Property

The following examples explain the font-feature-setting property with different values.

Font Feature Setting Property with Normal Value

To no enable any special features such that the browser uses the font's default settings without applying any additional typographic enhancements, we use the normal value. This is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font-feature-settings: "normal";
        }
    </style>
</head>

<body>
    <h2>
        CSS font-feature-setting property
    </h2>
    <h4>
        font-synthesis-weight: normal
    </h4>
    <p>
        Fact: India is home to 1.4 billion people,
        with 22 officially recognized languages 
        and 7 UNESCO World Heritage Sites.
    </p>
</body>

</html>

Font Feature Setting Property with Feature Tag

To enable or disable specific typographic features within a font, we specify a space separated tuple containing a four character feature tag and a value (e.g. "liga" 1; enables standard ligatures, "kern" 0; disables kerning). Some tags have been used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font-size: 22px;
        }

        .fact-1 {
            font-feature-settings: "frac" 1;
        }

        .fact-2 {
            font-feature-settings: "c2sc" 1;
        }

        .fact-3 {
            font-feature-settings: "smcp" 1;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-feature-setting property
    </h2>
    <h4>
        font-synthesis-weight: "frac"
    </h4>
    <p class="fact-1">
        India is home to 1.4 billion people,
        with 22 officially recognized languages
        and 7 UNESCO World Heritage Sites.
    </p>
    <h4>
        font-synthesis-weight: "c2sc"
    </h4>
    <p class="fact-2">
        India has 28 states and 8 Union Territories,
        and is the world's largest democracy by population.
    </p>
    <h4>
        font-synthesis-weight: "smcp"
    </h4>
    <p class="fact-3">
        The Taj Mahal, a UNESCO World Heritage Site,
        was completed in 1653 and is renowned for
        its white marble architecture.
    </p>
</body>

</html>

Supported Browsers

Property
font-feature-setting	48.0	10.0	34.0	9.1	35.0

css_reference.htm

Print Page