[css-fonts-4] Content authors want to modify style based on the presence of color fonts

[litherum]

Perhaps we could figure out a way to use @supports to see if color fonts are supported?

[Jolg42]

Thanks @litherum for opening the issue ;-)

This issue is related with the color font format() specifier: #633

Based on creatives’ feedback regarding the use of color fonts on the web, there are cases when color fonts will lack of a viable fallback design, which will require specific layout adjustments.

For instance:

1. The color font may have been designed without any fallback glyphs
2. The fallback glyphs may be irrelevant (i.e. when fallback glyphs are automatically created: a colored alphabet that fits within square shapes would be converted into illegible black squares)
3. The fallback font may require different CSS styling (i.e. when its metrics are different from the color font)

In these cases, adding a feature detection of font formats (including color) would give web designers greater control over the fallback experience - specially during the transition phase until broad color font support is reached.

One potential solution could be to leverage @supports to identify the supported font flavors (this would be handy for both color and variable fonts).

One could argue that a fallback font should always be designed and match the color version, but from a creative’s standpoint, some color fonts will simply never have a fallback version (for aesthetic or practical reasons, as the the complexity and amount of work needed to create a color font with its fallback would prevent many to venture into color font creation).

What do you think?

[SergeyMalkin]

Is the main complaint here is that UA doesn't support color fonts or color font is supported, but lack non-color fallback glyphs? There are several reasons, besides UA not supporting color fonts, why having fallback glyphs in color font is important:

• Canvas or SVG may need to extract glyph geometry for fill/stroke/clip operations.
• Text shadow is rendered as solid color without colors.
• You can have b/w printer where colors are disabled. In this case I don't want to change layout based on printer model, so font should be the same. Although, we can use color glyphs rendered in greyscale, as images.

This is not about UA support for color fonts, but functionality that requires fallback glyph to be present. If one of those is used on your page, you better have font that has fallback glyphs. If it is not, why do you care about fallback glyphs?

#633 talks about @font-face functionality that allow UA download fonts with format that it supports. Whatever font is downloaded from list of urls in src descriptor, should have same or similar layout characteristics. If color formats is supported as part of formats() filter, we are getting font that works in your UA automatically.

[RoelN]

A solution like this could also be used to download only the supported format. E.g. download SVG in Firefox and Edge, but COLR in Chrome when it doesn't support SVG. You would prevent sending unsupported formats to browsers, or creating huge all-formats-in-one-font files.

[tabatkins]

@RoelN That's already handled by the format() function in the @font-face/src descriptor; you can list the required features the file needs, and the UA will skip over it if they don't support the feature.

I'm in favor of figuring out an @supports syntax for this. Per usual with @supports, this ideally would let browsers reuse the same parsing logic they already have for the format() feature detection.

[css-meeting-bot]

The Working Group just discussed Content authors want to modify style based on the presence of color fonts, and agreed to the following:

• RESOLVED: moved this issue to be a more general issue

The full IRC log of that discussion

<fantasai> Topic: Content authors want to modify style based on the presence of color fonts
<astearns> github: https://github.com//issues/2540
<fantasai> github: https://github.com//issues/2540
<frremy> myles: this one can probably fit in a few minutes
<frremy> myles: the idea is that color fonts are so important to the design of the website that you should be able to chose other styles of the page depending on whether the browser supports colors fonts
<frremy> myles: like a media query
<frremy> florian: is that related to the media query for image types?
<frremy> florian: maybe you could load some font type, then you load another font
<frremy> leaverou: you can detect variable fonts with font-weight: 399
<frremy> fantasai: not entirely because the browser supports it but the os could not support it
<frremy> fantasai: font-loading could be turned off, or the download didn't work
<frremy> fantasai: so your question is "did my font load" that you want
<frremy> fantasai: and we don't have the means to create this right now
<frremy> florian: custom media query?
<frremy> myles: this should be in javascript
<frremy> dbaron: we had a discussion a while ago, and we had resolved to add a few @support things
<frremy> dbaron: and I and TabAtkins didn't work them into the spec
<frremy> dbaron: we should start with these easy features first
<frremy> dbaron: and then we should think about more complex things, if we need
<frremy> heycam: we can maybe add @supports for the font descriptor values
<frremy> fantasai: yes, but the font might not have been loaded, so your styles will be wrong
<frremy> chris_: so whether or not you can load isn't good enough
<frremy> myles: which is why I recommend javascript
<frremy> florian: does the same argument apply for image formats?
<frremy> astearns: seems like to me
<frremy> florian: though an svg image, if you download it, you can maybe not support one of its feature
<frremy> TabAtkins: svg are very complex, but most images are pretty much the same
<frremy> florian: I still believe it's the same problem, it's a continuous scale
<frremy> fantasai: I think we are not going to solve this in font-4
<frremy> fantasai: so let's discuss this maybe in conditionals-4
<frremy> myles: so let's close the font spec issue, and redirect to a more general issue
<frremy> fantasai: we want to frame this as "did this resource download and load properly"
<frremy> RESOLVED: moved this issue to be a more general issue

[svgeesus]

This has now been added, see the explainer

• font-tech() and font-format() <supports-feature> Extensions to CSS @supports

The explainer includes examples based on the presence of color fonts, and also availability of different types of color fonts.