← Back to release summary

font-tech() and font-format() condition extensions to CSS @supports

Category
Graphics
Type
Chromium catches up
Status
Enabled by default (Chrome 108)
Intent stage
None

Summary

The font-tech() and font-format() are extensions to the @supports rule CSS Conditional Syntax enable declarative and programmatic access to feature detection of font stack features. Using these conditions together with @supports allow progressive enhancement of content depending on font format support. In particular with UAs differing in support for color font formats, this is useful for including color font style rule and @font-face definitions only if the user agent supports it. Using JS CSS.supports() calls this is also the first ergonomic way of testing for font stack capabilities on the web without UA sniffing or canvas pixel readback as in Chromacheck (https://pixelambacht.nl/chromacheck/). This feature is closely related to the @font-face src: descriptor syntax extension which was recently discussed and LGTM'ed here: https://groups.google.com/a/chromium.org/g/blink-dev/c/_9k-Ne8FRu4 - the same font format and technology keywords are used and synchronized between these two features.

Motivation

While font files look the same from the outside in their mime type and file signature, they may contain information that requires specific features of the UA's font stack. If an author wants to progressively enhance their site depending on font format capabilities of the UA, feature detection is needed. This feature here provides such a capability on the client side in two ways, declaratively in CSS, or programmatically in JS using CSS.supports(). Examples: If OpenType variations are supported, I want to use a set of different style rules than when variations are not available, or: If color font support is available, I want to enhance my site with a color fonts plus style rules affecting other parts of my page. This feature is closely related to the @font-face src: descriptor syntax extension which was recently discussed and LGTM'ed here: https://groups.google.com/a/chromium.org/g/blink-dev/c/_9k-Ne8FRu4 - the same font format and technology keywords are used and synchronized between these two features.

Standards & signals

Samples: https://github.com/w3c/csswg-drafts/blob/main/css-conditional-5/font-tech-format-explainer.md#use-case-1---progressive-enhancement-with-color-fonts

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-conditional-5/font-tech-format-explainer.md

View on chromestatus.com