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).

Juan del Peral

Thanks Erwin and Thomas, 

Considering this, we are splitting the variable font file in several files "freezing" the slant axis to different values. 

In case that it's useful to someone else:

fullVF = ttLib.TTFont(full_font_path)
partialFont = instancer.instantiateVariableFont(fullVF, {"slnt": 0})

Erwin Denissen

You can also use FontCreator to subset variable fonts, including the option to change the default axis value. This allows you to set the primary font instance to a different position within the design space, without the need to split your variable font.