Description

Enable testing for font stack capabilities and enable additional expressiveness with vector color fonts.

Rationale

Feature Detection

Color font format support differs in browsers. Knowing which font format and font-stack features a particular user-agent supports is currently hard to detect. At the moment this is only possible with canvas readback tests such as Chromacheck or UA sniffing.

User story: As a web developer, I would like to know which incremental enhancements I can deploy depending on font stack features of the UA.

Color Font support

Leading font foundries and type designers are excited about the capabilities that palette brings:

• https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/
• https://underware.nl/fonts/plakato/features/color/

With COLRv0 and COLRv1 (and to some extent OT-SVG) the use of font-palette adds a much wider expressivity and flexibility when using these vector color font formats. The WPT tests covering font-palette rely only on COLRv0 support.

Background

COLRv0 and OpenType Variations are modern font technologies that are widely supported. OpenType SVG fonts are supported in Firefox and Safari, and growing support for the new color font format COLRv1 is available in Chrome 98, (blog post) and Firefox ~107 (I2S)). Google Fonts shipped cross-platform color fonts in OT-SVG and COLRv1 formats.

Specification

• tech() function support in @font-face src: descriptor
  https://www.w3.org/TR/css-fonts-4/#font-face-src-parsing
• font-tech() and font-format() condition extensions to CSS @supports
  https://www.w3.org/TR/css-conditional-5/#at-supports-ext
• font-palette and @font-palette-values, see below tests relying only on COLRv0
  https://www.w3.org/TR/css-fonts-4/#propdef-font-palette

Tests

• tech() function support in @font-face src: descriptor
  https://wpt.fyi/results/css/css-fonts/parsing?q=font-face-src- (or only font-face-src-tech and font-face-src-format)
• font-tech() and font-format() condition extensions to CSS @supports
  https://wpt.fyi/results/css/css-conditional?q=css-supports-l5.html
  https://wpt.fyi/results/css/css-conditional?q=at-supports-font
• font-palette & @font-palette-values:
  https://wpt.fyi/results/css/css-fonts?&q=font-palette