# CSS: “font-feature-settings”: X is not a “font-feature-settings” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-feature-settings-x-is-not-a-font-feature-settings-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<!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

```html
<!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

```html
<!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>
```
