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

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

Specifications

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

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fontFamily
Chrome – Full support
Chrome 101 (Release date: 2022-04-26)
footnote Full support
Edge – Full support
Edge 101 (Release date: 2022-04-28)
footnote Full support
Firefox – Full support
Firefox 107 (Release date: 2022-11-15)
footnote Full support
Opera – Full support
Opera 87 (Release date: 2022-05-17)
footnote Full support
Safari – Full support
Safari 15.4 (Release date: 2022-03-14)
footnote Full support
Chrome Android – Full support
Chrome Android 101 (Release date: 2022-04-26)
footnote Full support
Firefox for Android – Full support
Firefox for Android 107 (Release date: 2022-11-15)
footnote Full support
Opera Android – Full support
Opera Android 70 (Release date: 2022-06-29)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15.4 (Release date: 2022-03-14)
footnote Full support
Samsung Internet – Full support
Samsung Internet 19 (Release date: 2022-11-01)
footnote Full support
WebView Android – Full support
WebView Android 101 (Release date: 2022-04-26)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15.4 (Release date: 2022-03-14)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also