CSS Font Weight Property not Working with TTF Variable Font

1

Hi,
I’m having an issue where the TTF Variable font I’ve exported from Glyphs will not recognize the “font-weight” property in CSS. It works fine with the new “font-variation-settings” but I’d like it to also work with “font-weight” for less savvy users (also because this is generally industry standard). Any help is appreciated. Below is the code I’m using to declare the font in CSS.

@font-face{
  font-family: Intro;
  src:url(../fonts/Introv2.0GX.ttf);
  font-weight: 100 800;
}
p{
  font-weight: 700;
}

declaring font-weight: 100 800; should specify the min and max points on the weight axis

The following works:

p{
  font-variation-settings: 'wght' 700;
}
1 Like
2

anyone?

3

Perhaps @Lorp can help?

4

The CSS looks good. Does the code work with other variable fonts with a Weight axis, or is it just yours where it fails?

5

Is that your entire CSS, or just an extract? It’s possible that font-weight elsewhere in the CSS is overriding font-weight specified in the p{}

1 Like
6

@Lorp sorry for the delayed response, that’s the entire CSS so it couldn’t be overridden elsewhere, I’ve tested it in a variety of scenarios and have been unable to get it to work. Apparently I’m the only one having this issue so it must be a fault of mine somewhere. No special tricks I should know about when exporting?

Thanks

7

Feel free to email me the font, and I can see if I get a different result.