CSSFontPaletteValuesRule: fontFamily property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

The read-only fontFamily property of the CSSFontPaletteValuesRule interface lists the font families the rule can be applied to. The font families must be named families; generic families like courier are not valid.

Value

A string containing a space-separated list of the font families on which the rule can be applied

Examples

Read the associated font family

This example first defines an @import and an @font-palette-values at-rule. Then it reads the @font-palette-values rule and displays its name. The MDN live sample infrastructure combines all the CSS blocks in the example into a single inline style with the id css-output, so we first use document.getElementById() to find that sheet. The palette will be the second CSSRule in that stylesheet. So, rules[1] returns a CSSFontPaletteValuesRule object, from which we can access fontFamily.

HTML

html

<pre id="log"> The @font-palette-values at-rule's applies to the font families:</pre >

CSS

css

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";  @font-palette-values --Alternate {   font-family: "Bungee Spice";   override-colors:     0 #00ffbb,     1 #007744; }  .alternate {   font-palette: --Alternate; }

JavaScript

const log = document.getElementById("log");  const rules = document.getElementById("css-output").sheet.cssRules; const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

Result

Specifications

Specification
CSS Fonts Module Level 4> # dom-cssfontpalettevaluesrule-fontfamily>

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 17, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content