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

[Marcus_Brown]

Same problem here. okt 2024...

[Tarun Saini]

Hi 

@Marcus_Brown

,

Thanks for reaching out . Could you please elaborate more on the issue you're facing? If possible, can you share the screenshot of the issue?

Regards,

Tarun

[Buro Binnen]

No screenshot needed. Variable fonts doesn'd work in Webflow. Please solve this problem. Thanks

[Marcus_Brown]

sorry, it is not Webflow but with Wordpress theme PRO from Theme.co

[Buro Binnen]

Okat Marcus, it seems Adobe has more problems with variable fonts!!

[Marcus_Brown]

Yep, seems like it!

[Aneta Ivanova]

I'm facing the same issue while using Wordpress+Elementor. Trying to import Marilde Display Variable.
After digging into the code, I saw that TypeKit imports the font with a fixed font weight:

@font-face {
font-family:"marlide-display-variable";
src:url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

 Instead of importing it with the real range of the font like so:
font-weight: 100 1000; ( or whatever it is for the specific font )
So this weight indicated in the import file will be the only weight you will be able to use. 

The only workaround I've found is using this:

font-variation-settings: "slnt" 0, "wdth" 100, "wght" 300; and choosing the right settings.

Hope that helps someone, but @Adobe , this is ridiculous and looks like an easy thing to fix if you wanted to fix it.

[Aneta Ivanova]

Second option is copy pasting the import code into your CSS AFTER the Typekit CSS and fixing the issue yourself by adding the full range of weights.