[css-fonts-4] [varfont] Variation fonts deserve their own @-rules

[litherum]

Migrated on behalf of @bramstein:

I'm a little worried this is overloading the @font-face syntax too much. Families are created using multiple @font-face rules, one for each "instance". A variation font already contains all variations, so it doesn't map very cleanly to @font-face. The new format hints and range proposals feel a little off to me for that reason.

I know this would be a substantial change, but would it be possible to define a new @ rule for variation fonts? Something like this:

@font-variation {
  font-family: BodyText;
  src: url(bodytext-vf.woff2) format("woff2"),
       url(bodytext-vf.woff) format("woff");
}

This avoids extending the format hints and overloading the @font-face descriptors. As @nattokirai pointed out, most uses of variation fonts won't need weight, style, and stretch descriptors.

@font-face {
  font-family: BodyText;
  font-weight: normal;
  src: url(bodytext-normal.woff2) format("woff2"),
       url(bodytext-normal.woff) format("woff");
}

@font-face {
  font-family: BodyText;
  font-weight: bold;
  src: url(bodytext-bold.woff2) format("woff2"),
       url(bodytext-bold.woff) format("woff");
}

@font-variation {
  font-family: BodyText;
  src: url(bodytext-vf.woff2) format("woff2"),
       url(bodytext-vf.woff) format("woff");
}

This would fall back to the two @font-face rules in browsers that do not support font variations. Browsers that support font variations would ignore the @font-face rules and use the @font-variation rule for everything.

[litherum]

Migrated on behalf of @jpamental:

I wonder if we could actually leverage @font-face blocks to define fallbacks and corrections, and then reference which font family you want to use as the fallback in an actual web font block like @bramstein outlined above. This would allow us to use @font-face for normal webfonts and more closely matched fallbacks, and only browsers that understand @font-variation would pay attention to the new block.

@font-face {
  font-family: Helvetica;
  font-size: 0.975em; (this is relative to whatever the size it’s replacing)
  letter-spacing: -0.5px;
}
@font-face {
  font-family: "Droid Sans";
  font-size: 0.975em; (this is relative to whatever the size it’s replacing)
  letter-spacing: -0.5px;
}
@font-face {
  font-family: SomeWebFontName;
  src: …
  font-fallback: Helvetica, “Droid Sans”;
}
@font-variation {
  font-family: SomeWebFontName;
  src: …
}

This extends the ideas I was trying to articulate here: #450

but seems to dovetail nicely with this approach.

[litherum]

Migrated on behalf of @aaaxx:

@jpamental, that seems problematic because it restricts each font to one font stack. For example, if you used different sans-serif fonts in body and heading, you'd probably want different adjustments for the same "generic" fallback font that you'd put in both stacks.

[behdad]

@jfkthame and I had originally come up with @font-family as well, for similar reasons.

[litherum]

Do we still want to pursue this? The last comment was over a year ago.

[bramstein]

Now that we have shipping browser implementations and sites that use the current syntax I feel that changing the syntax at this point isn't a good move. I'm fine with closing this issue.