font-family

@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /* other palette settings follow */
}

Other palette values that follow apply only to the specified font family. You can create @font-palette-values for other font families by using the same <dashed-ident>s. This means that if you have multiple Color Fonts and can use the same identifier for each.

<family-name>

Specifies the name of the font-family.

font-family = 
  <family-name>#  

In this example, when the font-family descriptor is used in the @font-palette-values at-rule, the same value is used for the font-family, as when it is declared.

HTML

<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>

CSS

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --bungee-extra-spicy {
  font-family: "Bungee Spice";
  override-colors: 0 DarkRed, 1 Red;
}

h2 {
  font-family: "Bungee Spice";
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}

Result

In this example, two @font-palette-values at-rules are set for two font families, but both the at-rules use the same dashed-ident identifier, --Dark Mode. This helps to set the font-palette property for multiple elements, h1 and h2 in this case, at the same time. This can be useful when you want to update font colors to match your site's branding.

@font-palette-values --Dark-Mode {
  font-family: "Bungee Spice";
  /* palette settings for Bungee Spice */
}

@font-palette-values --Dark-Mode {
  font-family: Bixa;
  /* palette settings for Bixa */
}

h1,
h2 {
  font-palette: --Dark-Mode;
}

h1 {
  font-family: "Bungee Spice";
}

h2 {
  font-family: Bixa;
}

• font-family
• @font-palette-values
• font-family descriptor
• override-colors descriptor
• font-palette property
• CSSFontPaletteValuesRule.fontFamily