Adding Variable Fonts to Web Project

[Craabit]

I'm having issues adding a variable font to a web project.

It doesn't matter which weight I select, the only one I'm able to add is "extralight" (see screenshot).

I'm not sure if I'm doing something wrong or if this is a bug.

Can anyone help with this?

[Buro Binnen]

May 2024 still a problem with Adobe Variable fonts. This problem occur more then a year now, why can this be fixed?

[eamonmckiernan]

For anyone looking to use a variable font with a tailwind project

I was able to get the variable fonts working using the fllowing syntax:

extend: {
    fontFamily: {
        'header': [
            '"magno-sans-variable", sans-serif',
            {
                fontVariationSettings: '"wght" 800'
            },
        ],
    },
}

[jpweller]

Same issue here, only replying so that maybe Adobe will do something about it

[jpweller]

I'm using Webflow, and on further research, I belive this is actually a Webflow issue. I got it working using custom code. You need to use the "font-variation-settings" property. For example:

strong {
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
}