CSS @font-palette-values - font-family

The font-family descriptor of @font-palette-values at-rule in CSS is helpful in specifying which font-family palette values are to be referred or applied to. It should actually match with the values that are used while setting the CSS font-family.

Possible Values

The font-family descriptor of @font-palette-values at-rule in CSS contains the following value:

Syntax

font-family = <family-name>

The above syntax will look like this:

@font-palette-values --sample-font {
   font-family: "Brygada1918-Italic";
}

CSS font-family - Using Matching font-family Names

Following example demonstrates the use of font-family descriptor of @font-palette-values at-rule, where same font-family is used with @font-face at-rule as well.

<html>
<head> 
<style>
   @font-face {
      font-family: "RocherColorGX";
      src: url(font/RocherColorGX.woff2);
   }

   body {
      font-family: "RocherColorGX";
      font-size: 2em;
      height: 100vh;
   }

   @font-palette-values --blues {
      font-family: RocherColorGX;
      base-palette: 10;
   }
   .blues {
      font-palette: --blues;
   }
</style>
</head>
<body>
   <h1 class="blues">font-family</h1>
</body>
</html>

CSS font-family - Using Same Identifier For Multiple Font Families

Following example demonstrates the use of font-family descriptor of @font-palette-values at-rule, where same font-palette identifier is used for different elements.

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-face {
      font-family: "RocherColorGX";
      src: url(font/RocherColorGX.ttf);
   }

   body {
      font-family: "RocherColorGX";
      font-size: 2em;
   }

   @font-palette-values --green {
      font-family: "RocherColorGX";
   }

   @font-palette-values --green {
      font-family: "Bungee Spice";
   }

   h2, h3 {
      font-palette: --green
   }

   h2 {
      font-family: "RocherColorGX";
   }

   h3 {
      font-family: "Bungee Spice";
   }
</style>
</head>
<body>
   <h2>h2</h2>
   <h3>h3</h3>
</body>
</html>
Advertisements