About This CSS Issue
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>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.