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

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

<pre id="log">

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

@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

```js

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

{{EmbedLiveSample("Read the associated font family", "100", "40")}}

{{Specifications}}

{{Compat}}

- {{cssxref("@font-palette-values")}} at-rule

- {{cssxref("@font-palette-values/font-family", "font-family")}} descriptor