Re: [csswg-drafts] [css-fonts-4] Behavior for variable fonts with 'ital' axis ambiguous / underspec'ed

There are a few nuances to this that are worth noting.

When using a variable font in two files (one containing upright characters, one containing italics), family grouping works perfectly in all browsers:
```
@font-face { 
  font-family: ExampleFont;
  src: url('VariableFont_Roman.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
}
@font-face { 
  font-family: ExampleFont;
  src: url('VariableFont_Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
}
```
This results in every browser I've tested rendering the text correctly, calling the right font file and rendering the proper glyphs, so that
```
font-weight: 725;
```
gets you the proper bolder weight;

```
font-style: italic;
```
gets you proper italics;

```
font-weight: 725;
font-style: italic;
```
gets you the proper italics, set to the bolder value on the weight axis


Where this breaks down is when you have a single variable font file that contains both upright and italics. It's worth noting here that from the type designers' (and OT spec creators') perspective, italics ('ital') is boolean (0 or 1, upright or italic), whereas slant ('slnt') is intended to be a range. And it's highly unlikely that you would have both italics and slant in the same design.

If I understand it correctly, this is why it was implemented in Safari in this way (to use the degree range to indicate the presence of an italic axis). According to @litherum the correct syntax would be something like this:
```
@font-face { 
  font-family: ExampleFont;
  src: url('VariableFont_Combined.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 20deg;
}
```
where the resulting behavior would be that the browser would inspect the font and based on the presence of an italic axis, clamp `font-style: normal` or `font-style: italic` to the correct axis value. If there is a 'slnt' axis, it would render at the indicated `deg` value along that axis.

Currently, if I use that syntax, everything works as @litherum describes. If I omit `font-style` entirely from the `@font-face` definition, it will work as expected in all the other browsers, but in Safari it will also synthesize italics on top of the proper use of the italic axis.

**Of Note**
In all cases, you still get the expected output if you use `font-variation-settings`

**Proposed solution**
Given that it is quite possible possible to have both a upright and italic character sets in a single file, it seems better to allow more specific declaration. I would suggest:
```
@font-face { 
  font-family: ExampleFont;
  src: url('VariableFont_Combined.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal italic;
}
```
for when you have upright and italics, and 
```
@font-face { 
  font-family: ExampleFont;
  src: url('VariableFont_Combined.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
}
```
for when a slant axis is present.

**References:**
You can see all of this in action on the guide I wrote on the MDN site (it currently uses the syntax that @litherum suggested in the italics section)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

And there's a CodePen of just the italics set up without the `font-style` declaration so you can see it the other way and edit as you see fit.
https://codepen.io/jpamental/pen/EeOyyZ

-- 
GitHub Notification of comment by jpamental
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3125#issuecomment-422496154 using your GitHub account

Received on Tuesday, 18 September 2018 18:19:27 UTC