UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15

Example URL:

Steps to reproduce the problem:
1. Download attached zip
2. View test-neg-int.html

What is the expected behavior?

What went wrong?
This issue was discovered whilst working on Roboto-VF.

In the Ms OT Spec for the slnt axis, it says the following:

"This means that a typical, right-leaning oblique design will have a negative slant value."

https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxistag_slnt

When we build the fonts using negative values for the slant axis, the following @font-face declaration doesn't work:

    @font-face {font-family: 'Roboto-VF';
    src: url('./vfs/Roboto-neg-slant-VF.ttf') format('truetype');
    font-weight: 1 999
    font-style: oblique -12deg 0deg;}

If I build the fonts using positive values for the slant axis, the following @font-face declaration will work:

    @font-face {font-family: 'Roboto-VF';
    src: url('./vfs/Roboto-pos-slant-VF.ttf') format('truetype');
    font-weight: 1 999;
    font-style: oblique 0deg 12deg;}

I have tried many permutations of the above declarations and only a font which contains positive values for the slant axis will work.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? No 

Does this work in other browsers? No
 Safari Version 11.1.1 (13605.2.8

Chrome version: Version 69.0.3480.0 (Official Build) canary (64-bit)  Channel: n/a
OS Version: OS X 10.13.5
Flash Version: 

This issue was originally sent as an email to Google's material fonts group. Here's the full text.

---

Hey folks,

We're reviewing Roboto VF and we've hit an issue regarding the slant axis and how it's used in the CSS @font-face rule.

I'm attaching a zip containing two test html pages and fonts.

TL;DR

- If we comply with the Ms OT Spec by setting the font's slant axis vals to negative then declare the css slant using the same range, it doesn't work. Test page test-neg-int.html
- If we set both the slant vals in the font and testpage to use positive ints, it works just fine. Test page test-pos-int.html

Font Setup for Roboto-neg-slant-VF.ttf

I've set the slant axis vals in the font's designspace to use a negative integers, as the spec states:

Note that the scale for the Slant axis is interpreted as the angle of slant in counter-clockwise degrees from upright. This means that a typical, right-leaning oblique design will have a negative slant value.

The slant axis in the designspace is: 

        <axis default="0" maximum="0" minimum="-12" name="slant" tag="slnt">
            <labelname xml:lang="en">Slant</labelname>
        </axis>

This will give us the following fvar slant axis in the font:

    <Axis>
      <AxisTag>slnt</AxisTag>
      <Flags>0x0</Flags>
      <MinValue>-12.0</MinValue>
      <DefaultValue>0.0</DefaultValue>
      <MaxValue>0.0</MaxValue>
      <AxisNameID>258</AxisNameID>
    </Axis>

Test Page Setup test-neg-int.html:

The @font-face in the test html page is:

    @font-face {font-family: 'Roboto-VF';
    src: url('./vfs/Roboto-neg-slant-VF.ttf') format('truetype');
    font-weight: 1 999
    font-style: oblique -12deg 0deg;}

Changing font-style: oblique to "0deg -12deg" or making both combos positive ints didn't solve it. Also defining slants outside the range did nothing e.g "-20deg 20deg".

​
​VF not slanting in test-neg-int.html

When I replace "-12" with "12" in the designspace and html test page and regen the font (Roboto-pos-slant-VF.ttf), everything works as expected (test-pos-int.html). In examples given by Mozilla, they appear to be using positive ints as well.

​
​
​VF correctly slants in test-pos-int.html using Roboto-pos-slant-VF.ttf

I'm asking here first because I sense I'm probably missing something obvious or I'm just being a complete idiot. Its important we get this correctly implemented into the @font-face rule so Google Fonts users will be able to use variable fonts without needing to update their existing css.

I'm starting to think that the CSS spec and Ms OT Spec are conflicting. OT wants negative, whilst CSS may want positive?

If someone is able to get test-neg-int.html to work using the Roboto-neg-slant-VF.ttf, I'd be incredibly grateful.

I've been testing in Chrome Version 69.0.3480.0 (Official Build) canary (64-bit)
 

Deleted: 2017-07-03_slant-test.zip 6.3 MB

2017-07-03_slant-test.zip 6.3 MB Download