CSSFontFeatureValuesRule

Baseline 2025 *

Newly available

Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

The CSSFontFeatureValuesRule interface represents an @font-feature-values at-rule. The values of its instance properties can be accessed with the CSSFontFeatureValuesMap interface.

@font-feature-values allows developers to associate, for a given font face, a human-readable name with a numeric index that controls a particular OpenType font feature. For features that select alternative glyphs (stylistic, styleset, character-variant, swash, ornament or annotation), the font-variant-alternates property can then reference the human-readable name in order to apply the associated feature. This is convenient, because it allows the same name to be used of represent a set of alternative glyphs across a number of fonts.

Instance properties

Inherits properties from its ancestor CSSRule.

CSSFontFeatureValuesRule.annotation: A user defined value definition and value that applies an alternate annotation of the font.
CSSFontFeatureValuesRule.characterVariant: A user defined value definition and value that applies a stylistic alternatives for characters of the font.
CSSFontFeatureValuesRule.fontFamily: A string that identifies the font family this rule applies to.
CSSFontFeatureValuesRule.ornaments: A user defined value definition and value that applies alternative ornaments of the font.
CSSFontFeatureValuesRule.styleset: A user defined value definition and value that applies alternate style sets of the font.
CSSFontFeatureValuesRule.stylistic: A user defined value definition and value that applies alternative glyphs of the font.
CSSFontFeatureValuesRule.swash: A user defined value definition and value that applies alternative swashes of the font.

Instance methods

Inherits methods from its ancestor CSSRule.

Examples

Read font family

In this example, we declare two @font-feature-values one for the Font One font family, and the other for Font Two. In both declarations we define that the name "nice-style" can be used to represent the styleset alternate glyphs for both of the fonts, specifying the index for that alternate in each font family. The alternate glyphs are then applied for any .nice-look class, using font-variant-alternates and passing the name to the styleset() function.

We then use the CSSOM to read these declaration as CSSFontFeatureValuesRule instances, displaying them into the log.

CSS

css

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(
    nice-style
  ); /* name selects different index for same alternate in different fonts */
}

<pre id="log"></pre>

#log {
  height: 40px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const rules = document.getElementById("css-output").sheet.cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log(`The 1st '@font-feature-values' family: "${fontOne.fontFamily}".`);

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log(`The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}"`);