Handling CSS Color Fonts with font-palette

Color fonts are a relatively new feature in CSS that allows for more complex and visually rich typography. A color font is a file containing color information in addition to the standard glyph outlines. The browser can display text with multiple colors and shades when using a color font.

Color fonts can be used to create visually stunning text effects such as gradients, shadows, and 3D effects. They can also be used to add more subtle highlights or accents to text.

Issues in Conventional Text Expression

While CSS allows you to change the color of text, it cannot represent more complex text formatting where each character has a different color or shading.

You might need to use an image or element like canvas to represent such text. However, using images can be expensive in terms of performance, and it can limit accessibility and usability of the site as users won’t be able to zoom in or out, select text, or copy it.

Thus, it’s important to consider the trade-offs between aesthetics and accessibility when designing and implementing text formatting on a website.

Color Fonts

To use color fonts, it is necessary to create font files according to font formats such as OpenType-SVG and COLR.

Google Fonts provides a search filter to show only color fonts available in their library.

COLRv1 is a relatively new format for color fonts that adds features such as gradation, which was not possible in the previous version, COLRv0.

Most modern browsers support COLRv1, except for Safari, which supports COLRv0.

Using color fonts can help improve the issues mentioned earlier, about representing complex text formatting on a website. However, it is important to note that color fonts can be larger in file size and may not be supported by all browsers.

Using font-palette and font-palette-value

Color fonts can include multiple color patterns, providing designers with greater options for creating visually appealing typography. Nabla, for instance, offers seven patterns, including yellow and pink-based designs.

To choose which pattern to use, you can use the font-palette and font-palette-value CSS properties. font-palette has four values: normal, light, dark, and <palette-identifier>.

The normal value uses the default palette specified by the font, while light and dark apply the light or dark mode palette specified by the font file. If the palette isn’t specified in the font file, it defaults to the same palette as normal.

@font-palette-values --Nabla { /* using the identifier */
  font-family: 'Nabla';
  base-palette: 5;
}

h2 {
  font-family: 'Nabla';
  font-palette: --Nabla;
}

Using override-colors

The font-palette-value property allows for partial color changes using override-colors.

@font-palette-values --Nabla { /* identifier */
  font-family: 'Nabla';
  base-palette: 3;
  override-colors:   /* adding a red outline */
    0 rgb(255, 0, 0),
    1 rgb(255, 255, 255),
    2 rgb(255, 255, 255),
    3 rgb(255, 255, 255);
}

h2 {
  font-family: 'Nabla';
  font-palette: --Nabla;
}

You can see the outline effect:

However, it’s not currently possible to call a CSS custom property value in font-palette-value.

Here is an example that does not work:

:root {
    --base-palette: 3;
}

@font-palette-values --Nabla {
  font-family: 'Nabla';
  base-palette: var(--base-palette);
}

In the spec, it says this,

Functions such as ”calc()”, ”var()”, and ”env()” are valid within the braces of a ”@font-palette-values” rule. They are evaluated within the context of the root element. Relative units are also evaluated within the context of the root element.

And there is a discussion on GitHub that is debating whether or not to allow var() at all.

I am not sure what will happen in the future, but if you want to switch palette values dynamically in the current state of the spec, you can assign font-palette-values itself to a custom property to solve the problem.

@font-palette-values --blue {
    font-family: 'Nabla';
    base-palette: 3;
}

@font-palette-values --gray {
    font-family: 'Nabla';
    base-palette: 4;
}

:root {
    --font-palette: --blue;
}

h2 {
    font-family: 'Nabla';
    font-palette: var(--font-palette);
}

You can also check out this CodePen demo to try out the different palettes that Nabla offers:

See the Pen Handling CSS Color Fonts with font-palette by Alex Ivanovs (@stackdiary) on CodePen.