slnt - Slant axis browser support

Juan del Peral

Hi all,

We're working on a font with 6 axes, including slant (-21 to 21 degrees).

While Chrome displays it correctly, Safari (including iPhones, which cover 18.5% of browsers) does not. Here’s what we've tried:

1. Default behavior

Chrome [left] looks good, Safari [right] assumes the normal slnt value is 21






2. Explicitly setting the slnt value

body {
  font-variation-settings: "slnt" 0;
}

But this breaks the <em> tag for italics.

3. Hack

body {
  font-variation-settings: "slnt" 0;
}

em, i {
  font-variation-settings: "slnt" -9.5;
}

Works as expected, but it's not ergonomic for users

Any suggestions for a fix or alternative solutions?

Thanks

Erwin Denissen

I assume your font uses an avar version 1 table. The default axis values determine the default style, so if you expect the upright style to be the default, that should also apply to the default value for your slnt axis. In the upcoming avar version 2 (which isn't widely supported yet), you'll be able to set a different variation as the default.

I've run tests in Safari, and everything seems to be working as expected on my end, so it's difficult to pinpoint why it might be failing for you.

Thomas Linard

Hi Juan,

You can also refer to VF Slant Test (by Stephen Nixon).