files/en-us/web/api/cssfontpalettevaluesrule/fontfamily/index.md
{{APIRef("CSSOM")}}
The read-only fontFamily property of the {{domxref("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.
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 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;
}
const log = document.getElementById("log");
const rules = document.getElementById("css-output").sheet.cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
{{EmbedLiveSample("Read the associated font family", "100", "40")}}
{{Specifications}}
{{Compat}}