Font feature detection and palettes

[drott]

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

[jfkthame]

This seems good to me: complete and interoperable implementation of these features will simplify things for authors wanting to deliver rich color-font-based content, where currently it is quite complex to deploy content that works well across all browsers.

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there were two mentions of color fonts, so not enough to make the top list in #248.

I don't think web developers can discern all the separate pieces of that make up support for color fonts, and I don't see any mentions of "font-palette", "font-format", or "tech()".

[foolip]

In the MDN short survey on CSS & HTML, "CSS color font feature detection and palettes" was selected by ~9% of survey takers, putting it in the bottom third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

Thank you for proposing this for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Font feature detection and palettes focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.