Skip to main content
Craabit
Participating Frequently
Feb 22, 2023 2:39 PM UTC
Answered

Adding Variable Fonts to Web Project

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?

      Aneta IvanovaCorrect answer
      Participant
      Dec 16, 2024 10:47 PM UTC

      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.

      View reply

      63 replies

      manuellusti
      Participant
      Apr 5, 2025 9:08 AM UTC

      April 2025, still a problem. Can't make it work..

      Translate
      christine_haynes
      christine_haynes
      Participant
      Mar 17, 2025 10:51 PM UTC

      I am having same issue with Deuterium Variable and can not use my webkit embed code for Klaviyo because it's only pulling the first isntance (Thin) and I need Medium. I was able to add CSS to my Shopify site to pull Medium instance but the font loads slowly and shows Thin first.

      Translate
      Aneta Ivanova
      Participant
      Dec 16, 2024 10:34 PM UTC

      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.

      Translate
      Aneta IvanovaCorrect answer
      Participant
      Dec 16, 2024 10:47 PM UTC

      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.

      Translate
      Marcus_Brown
      Participant
      Oct 21, 2024 9:01 AM UTC

      Same problem here. okt 2024...

      Translate
      Tarun Saini
      Community Manager
      Tarun SainiCommunity Manager
      Community Manager
      Oct 24, 2024 11:03 AM UTC

      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

      Translate
      Buro Binnen
      Participant
      Oct 24, 2024 12:34 PM UTC

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

      Translate
        jpweller
        jpweller
        Participant
        Jun 20, 2024 3:54 PM UTC

        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;
}
        Translate
          jpweller
          jpweller
          Participant
          Jun 20, 2024 3:29 PM UTC

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

          Translate
          eamonmckiernan
          Participant
          Mar 3, 2024 6:35 AM UTC

          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'
            },
        ],
    },
}
          Translate
          FranPI
          Participant
          Feb 23, 2024 11:58 AM UTC

          Same problem with Avada theme for Wordpress and the Sole Sans family...

          Translate
          Buro Binnen
          Participant
          May 2, 2024 11:36 AM UTC

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

          Translate
          Fearless_artist5E5A
          Participating Frequently
          Jan 29, 2024 3:58 PM UTC

          Adobe variable fonts are UNUSABLE in Webflow. Please fix this @Neelamk 

          Translate
            LoveMyFonts
            Participant
            Feb 9, 2024 4:35 AM UTC

            Same problem here. Trying to add additional instances of Postea Variable and all I can get is Regular (or Italic, which I don't need for this project). I am trying to use for website built with Format.com. Very frustrating, and live tech support from Adobe just sends me to articles that don't solve the problem. Can Adobe suggest a workaround? Perhaps a way to save an instance as as separately named font? From what I can tell, all you get is the standard weight/style under the family name. Or maybe the foundries could issue versions of the font with each instance named separately. 

            Translate
            Tim342472310v1m
            Participant
            Dec 29, 2023 2:07 PM UTC

            Having same issue as others in Webflow, but with Objektiv Variable, only base font and no variable controls. Update?

            Translate
              Show more replies
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices