Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to use font-variant-settings property in CSS?

CSS Web Development Front End Technology

The CSS font-variant-settings property provides low-level control over OpenType font features, allowing you to enable or disable specific typographic features like ligatures, small capitals, and number styles. This property gives you fine-grained control over font rendering.

Syntax

selector {
    font-variant-settings: "feature" value;
}

Possible Values

Value Description
normal Default value, equivalent to no feature settings
"feature" value OpenType feature tag with on (1) or off (0) value
inherit Inherits from parent element
initial Sets to default value

Example 1: Enabling Small Capitals

The following example demonstrates using the "smcp" feature to enable small capitals 

<!DOCTYPE html>
<html>
<head>
<style>
    .normal-text {
        font-size: 18px;
        margin: 10px 0;
    }
    
    .small-caps {
        font-size: 18px;
        font-variant-settings: "smcp" 1;
        margin: 10px 0;
    }
</style>
</head>
<body>
    <h2>Font Variant Settings Demo</h2>
    <p class="normal-text">Normal text without any variant settings</p>
    <p class="small-caps">Text with small capitals enabled</p>
</body>
</html>

Two paragraphs appear: the first shows normal text, and the second shows text where lowercase letters are rendered as small capital letters.

Example 2: Disabling Ligatures

This example shows how to disable common ligatures using the "liga" feature 

<!DOCTYPE html>
<html>
<head>
<style>
    .with-ligatures {
        font-size: 20px;
        font-family: serif;
        margin: 10px 0;
    }
    
    .no-ligatures {
        font-size: 20px;
        font-family: serif;
        font-variant-settings: "liga" 0;
        margin: 10px 0;
    }
</style>
</head>
<body>
    <h2>Ligatures Control</h2>
    <p class="with-ligatures">With ligatures: office, difficult, fluff</p>
    <p class="no-ligatures">Without ligatures: office, difficult, fluff</p>
</body>
</html>

Two paragraphs display the same text. In fonts that support ligatures, the first paragraph may show connected letter pairs (like "ff" or "fi"), while the second shows individual letters.

Common OpenType Features

Feature Tag Description
"liga" Common ligatures (fi, fl, etc.)
"smcp" Small capitals
"swsh" Swash characters
"kern" Kerning
"frac" Fractions

Conclusion

The font-variant-settings property provides precise control over OpenType features. Use feature tags with 1 to enable or 0 to disable specific typographic features for enhanced text rendering.

Updated on: 2026-03-15T18:04:58+05:30

90 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements