CSS Font Weight Property not Working with TTF Variable Font

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;
}

anyone?

Perhaps @Lorp can help?

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

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