Font ignores `font-variation-settings`

[ClementChaumel]

Hi, I used fontsquirrel to convert the .ttf file to a .woff and .woff2 format for the web. But then I noticed it ignored the font-variation-settings property set in CSS.

I created an example where I put it next to a variable font imported from google fonts to show what I expected was going to happen. https://vanilla-framework-4616.demos.haus/docs/examples/base/variable-font-test

Here's the code for the example

Is that expected? Did I mess something up in converting the font? I understand we might not want to allow every single weight value to be usable but even if we only allow some key ones, the slider should show them albeit in a "stepped" effect.

[djrrb]

Hi Clement, I am seeing the same issue.

Fontsquirrel can be very aggressive in how it subsets font files, so can you try the attached woffs to confirm all the data is intact?

UbuntuBeta0.862-woff.zip

These files are only a temporary thing...we are currently working on incorporating the generation of woffs into the build script, and will store them here on the repo. (#46)

If the problem persists with the new files, happy to continue troubleshooting it.

[guidoferreyra]

The variation has been trimmed from the font used on that webpage. Also when declaring @font-face rule for variable fonts you need to be explicit about the variation ranges.

@font-face {
    font-family: "Ubuntu";
    src: url("path/to/font/file/UbuntuRoman.woff2") format("woff2-variations");
    font-weight: 100 800; /*  min and max value for the weight axis */
    font-stretch: 75% 100%; /*  min and max value for the width axis, expressed as percentage */
    font-style: normal;
}

@font-face {
    font-family: "Ubuntu";
    src: url("path/to/font/file/UbuntuItalic.woff2") format("woff2-variations");
    font-weight: 100 800; /*  min and max value of the weight axis */
    font-stretch: 75% 100%; /*  min and max value of the width axis expressed as percentage */
    font-style: italic;
}

[ClementChaumel]

Thanks so much for the help, it works now! :tada:

Side question, why do we need to have two separate files for the italic and roman versions? Is it to allow for finer control over the way the italic version look than just adjusting the slant or is there a technical reason?

[djrrb]

Glad to hear it’s working, and thanks @guidoferreyra for providing the @font-face declaration!

Side question, why do we need to have two separate files for the italic and roman versions? Is it to allow for finer control over the way the italic version look than just adjusting the slant or is there a technical reason?

I guess it’s both technical and design reasons. If this italic were just a slanted version of the Roman and the point structures of the glyphs were compatible, it might have made more sense to keep them in the same file. In this case, a fair number of shapes have skeletal changes between the Roman and Italic styles (including major changes like 'a' and 'g' but also more subtle ones like 'd' and 'u' which grow a tail). It’s technically possible to “swap” those shapes within a single file, but it would add complexity (and filesize) to the project and probably isn’t worth it unless there are use cases for accessing variants between Roman and Italic. (There are also some ongoing browser issues with variable fonts with italic axes).

[guidoferreyra]

Can we close this one right?