W3cubDocs

/Web APIs

CSSFontPaletteValuesRule

The CSSFontPaletteValuesRule interface represents an @font-palette-values at-rule.

CSSRule CSSFontPaletteValuesRule

Instance properties

Inherits properties from its ancestor CSSRule.

CSSFontPaletteValuesRule.name Read only

A string with the name of the font palette.

CSSFontPaletteValuesRule.fontFamily Read only

A string indicating the font families on which the rule has to be applied.

CSSFontPaletteValuesRule.basePalette Read only

A string indicating the base palette associated with the rule.

CSSFontPaletteValuesRule.overrideColors Read only

A string indicating the colors of the base palette that are overwritten and the new colors.

Instance methods

Inherits methods from its ancestor CSSRule.

Examples

Read associated font family using CSSOM

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. As these rules live in the last stylesheet added to the document, the palette will be the second CSSRule returned by the last stylesheet in the document (document.styleSheets[document.styleSheets.length-1].cssRules). So, rules[1] returns a CSSFontPaletteValuesRule object, from which we can access fontFamily.

HTML

html

<pre id="log">The @font-palette-values at-rule font families:</pre>

CSS

css

@import url(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.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += `${fontPaletteValuesRule.fontFamily}`;

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSSFontPaletteValuesRule 101 101 107 No 87 15.4 101 101 107 70 15.4 19.0
basePalette 101 101 107 No 87 15.4 101 101 107 70 15.4 19.0
fontFamily 101 101 107 No 87 15.4 101 101 107 70 15.4 19.0
name 101 101 107 No 87 15.4 101 101 107 70 15.4 19.0
overrideColors 101 101 107 No 87 15.4 101 101 107 70 15.4 19.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule