Syntax question in font-face declarations for variable fonts in css2 API

[jpamental]

Hi there,

In digging in to the new API (announcement here for those who might not have seen it: https://codepen.io/nlwilliams/full/JjPJewp), I noticed that the @font-face syntax is a little out of sync with the spec. Not sure if there's a reason for this, so wanted to pose the question.

When specifying the format, it should be format('woff2-variations'), but the CSS being served specifices format('woff2'). It would be good to make sure it's following the spec, as others will look to this implementation to learn how to use them.

Example of current syntax:

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 200 900;
  src: url(https://fonts.gstatic.com/s/crimsonpro/v7/q5uDsoa5M_tv7IihmnkabARVoYF6CsKjnlQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

should likely be:

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 200 900;
  src: url(https://fonts.gstatic.com/s/crimsonpro/v7/q5uDsoa5M_tv7IihmnkabARVoYF6CsKjnlQ.woff2) format('woff2-variations');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[rsheeter]

Agreed, ty for reporting

[nathan-williams]

Hi Jason, thanks for reporting this. Could you share a link to the relevant section of the spec?

[jpamental]

Hi Nathan,

This seems to link to it closest: https://www.w3.org/TR/css-fonts-4/#font-face-src-requirement-types

[rsheeter]

Pardon my density but I don't see where that suggests format('woff2-variations'). I thought I'd seen the -variations suffix specified somewhere but I now can't seem to find it.

[jpamental]

It feels like it's harder to see than it should be, but it's in this section (this is as close as I could find for a bookmark) https://www.w3.org/TR/css-fonts-4/#font-face-src-parsing

(so whatever the file format, it would be format('[format]-variations') )

[rsheeter]

I read that as saying it should be format(woff2 supports variations) similar to the example format(opentype supports color(COLR)) example 17.

I see woff2-variations used in examples, including from Mozilla, but so far I don't see where it's specified.

[jpamental]

It feels like it's harder to see than it should be, but it's in this section (this is as close as I could find for a bookmark) https://www.w3.org/TR/css-fonts-4/#font-face-src-parsing

(so whatever the file format, it would be format('[format]-variations') ) But I'm still digging. It looks like it was updated, but I'm not clear on exactly how to write it (or who supports writing it that way)

[jpamental]

So the best I can piece together from various github issues, you're right @rsheeter - I'll test that out tomorrow and see where that actually works :) I missed that the syntax structure was changed at some point.

[jpamental]

I did a bit of digging around in previous versions of the spec, and tested things out a bit.

I found the previous version that used to stipulate format('[format]-variations'): https://www.w3.org/TR/2018/WD-css-fonts-4-20180410/#src-desc

This works in all browsers that support VFs, and matches up with what should result in a parse error if the browser doesn't support them (so avoiding a browser thinking it can load a font when it can't). That's why I think it's important to distinguish somehow between a variable and non-variable font in the declaration itself.

I did some testing and verified that the new syntax is indeed unsupported in every browser I tested (Safari, Chrome, and FF on Mac). I also checked with Myles to confirm that he had the same understanding regarding what the new syntax is supposed to be, and he concurred with your reading.

So here's what I tested out this morning, and think might be a good solution in order to support current and future syntaxes while still maintaining differentiation for browsers that don't support them (tested out on CodePen using Plex Sans):

@font-face {
  font-family: "Plex Sans VF";
  src: 
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2-variations");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}

This does work in all three, and once support for the new syntax starts rolling out (and that's something worth lobbying for since it's already in the spec) it will just start working.

Here's a link to the CodePen I used for testing

[rsheeter]

Good catch re old spec rev. I don't particularly want to issue woff2-variations given the current spec. I also don't want to issue a format that doesn't work. I fear that probably leads us to format("woff2") pending browser support for the new syntax.

[jpamental]

I get that. My reservation about it is mainly around education of developers using the service. They'll look at that as 'how it should be done', and that's the only version that was never in the spec. It just happens to work. If the solution were to include the 'new spec'/'past spec' version suggested above, that would be more in keeping with intent and progressive enhancement.

I know I'm being a bit pedantic—but I see so much outdated info coming out even now about how to use VFs, how well they're supported, etc that I'm perhaps a bit oversensitive. But I think it's important to make sure that anything put out by an authoritative source is as accurate and up-to-date as possible.

(but I also recognize that it's not my platform, so offering this just as a suggestion & opinion)

Cheers

[nstepien]

Is this issue still relevant?