HTML Guides for font-feature-settings
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
Feature tags in font-feature-settings are strings, so they must be quoted: write "liga", not liga.
The property turns on OpenType features of a font. Each feature has a four-letter tag, such as liga for standard ligatures, kern for kerning, smcp for small capitals or tnum for tabular figures. CSS defines the tag as a string, so it goes inside single or double quotes. Without quotes, liga is parsed as a keyword the property doesn't recognize. Browsers then drop the whole declaration, and the font features never switch on.
After the tag you can add a value: 1 or on enables the feature, 0 or off disables it, and some features take higher numbers to pick between alternate glyphs. Separate several features with commas and quote each tag, as in "liga" 1, "kern" 1. The validator reports the same error for a quoted tag that isn't exactly four characters long, such as "lig".
Many features also have a keyword in the font-variant-* properties, for example font-variant-ligatures: common-ligatures for ligatures and font-variant-numeric: tabular-nums for tabular figures. MDN recommends using them where they exist and saving font-feature-settings for features that have no keyword.
Invalid example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ligatures</title>
<style>
p {
font-feature-settings: liga;
}
</style>
</head>
<body>
<p>The office staff filed the final figures.</p>
</body>
</html>
Valid example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ligatures</title>
<style>
p {
font-feature-settings: "liga" 1;
}
.totals {
font-feature-settings: "tnum" 1, "lnum" 1;
}
</style>
</head>
<body>
<p>The office staff filed the final figures.</p>
<p class="totals">1,024 and 2,048</p>
</body>
</html>
Valid example with font-variant-* properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ligatures</title>
<style>
p {
font-variant-ligatures: common-ligatures;
}
.totals {
font-variant-numeric: tabular-nums lining-nums;
}
</style>
</head>
<body>
<p>The office staff filed the final figures.</p>
<p class="totals">1,024 and 2,048</p>
</body>
</html>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
1K Weekly
1,000 monthly checks. Cancel anytime.
Get 1K Weekly →Join teams across 40+ countries