Skip to main content
C
Craabit
Participating Frequently
February 22, 2023
Answered

Adding Variable Fonts to Web Project

  • February 22, 2023
  • 17 replies
  • 13376 views

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?

      Correct answer 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.

      17 replies

      M
      manuellusti
      Participant
      April 5, 2025

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

      christine_haynes
      christine_haynes
      Participant
      March 17, 2025

      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.

      A
      Aneta Ivanova
      Participant
      December 16, 2024

      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.

      A
      Aneta IvanovaCorrect answer
      Participant
      December 16, 2024

      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.

      M
      Marcus_Brown
      Participant
      October 21, 2024

      Same problem here. okt 2024...

      Tarun Saini
      Community Manager
      Tarun SainiCommunity Manager
      Community Manager
      October 24, 2024

      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

      B
      Buro Binnen
      Participant
      October 24, 2024

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

        jpweller
        jpweller
        Participant
        June 20, 2024

        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;
}
          jpweller
          jpweller
          Participant
          June 20, 2024

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

          E
          eamonmckiernan
          Participant
          March 3, 2024

          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'
            },
        ],
    },
}
          F
          FranPI
          Participant
          February 23, 2024

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

          B
          Buro Binnen
          Participant
          May 2, 2024

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

          F
          Fearless_artist5E5A
          Participating Frequently
          January 29, 2024

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

            L
            LoveMyFonts
            Participant
            February 9, 2024

            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. 

            T
            Tim342472310v1m
            Participant
            December 29, 2023

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

              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