font-family

Baseline 2022

Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The @font-palette-values descriptor font-family is used to specify which font-family palette values are to be applied to. This need to match exactly the values used when setting the CSS font-family.

Syntax

css

@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.

Values

<family-name>: Specifies the name of the font-family.

Formal definition

Related at-rule	`@font-palette-values`
Initial value	`n/a (required)`
Computed value	as specified

Formal syntax

font-family = 
  <family-name>#  

<family-name> = 
  <string>         |
  <custom-ident>+

Examples

Using matching family names

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

html

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

CSS

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

Using the same palette identifier for multiple font-families

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.

css

@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;
}

Specifications

Specification
CSS Fonts Module Level 4 # font-family-2-desc

Browser compatibility

BCD tables only load in the browser