Skip to main content

I created variables for weight, font family, and sizes.


In our design library, I updated all our font styles with variables. The variables are listed below.


The problem is that sometimes, the fonts would show up as “Open Sans Condensed” instead of “Open Sans”. The only way to correct it was to break the link to the style and then reapply it. It broke many components and styles where this library was used.


I disconnected all the variables from the font styles and defined them as one would normally. I published the library again. Updated the library within the file and the font on the text was still wrong. The fix is to select the component. Reset changes and then undo.


Not sure what I did wrong or why it broke so much stuff. But, I would like to resolve it as we plan on making several different modes for different accessibility needs and this would save us a considerable amount of time.


Note: Open Sans is not installed locally. The problem occurs on Mac and PC using Chrome, Firefox, and the Figma app.


Variables:


#:Number, T:String


Weights:

#Light | 300

#Regular | 400

#Semibold | 600

#Bold | 700


Font Family:

T: Default | Open Sans


Sizes:

#H1 | 40

#H2 | 32

#H3 | 24

#H4 | 20

#H5 | 16

#Body | 14


etc…

Hey! Did you got any solution for the above mentioned issue? I’m also facing the same, please share if any, Thanks!

Unfortunately, no. I just had to stop using variables for fonts. Had to manually go back and fix everything.

Just adding in a comment here to say that I’m also dealing with this issue to hopefully give it a bit more visibility. We’ve spent months building out our design system, and now, suddenly, when I use the styles on other pages, Figma says it doesn’t recognize the font since the font is appended by its weight (ex., “Roboto, Medium”, and not just Roboto). At this point, it would be such a massive effort to try and go back and fix this, so I’m hoping for a solution to show up that isn’t just “redo everything and don’t use this feature anymore.”

I am also dealing with this. I’ve spent a lot of time building things out and to have fonts change willy-nilly is frustrating for sure. Hoping there is a bugfix for this soon.

Hi there! I see in the backend you have filled out a ticket, and the technical specialist is waiting more information to investigate your issue. Please reply them directly via email. For your reference, your ticket number is #1113993.


For others who may encounter a similar issue, I’d also recommend you to reach out directly to the support team so we can investigate further the root cause of the issue on your end. Please fill out this form: https://help.figma.com/hc/en-us/requests/new


Please use your Figma account email, include a link to the file, and add support-share@figma.com as an Editor, so they can take a closer look. Thank you!

Happening here too. Our font-weight variables (regular, medium, semibold, bold) keep breaking when font-family variable is changed.

we experience same problems, using font variables such as weight and width breaks everything when trying to edit the text and fonts fallback to closest font weight default value, such as regular or bold and font width resets to default.


Please someone take a look, because using font with variables such as weight and width is in our brand style and we are kinda lost now…

Started having the same issue. Font-weight variables is not applied when the text is in style. I need to detach it from the style for the variable to be applied.

Any updates on this? It’s still broken on my end and throwing a wrench in everything.

I don’t know. They wanted me to send a link to the affected file. But I fixed everything by then.

This just started happening to me. Our design system needs multi-brand support. I created paragraph styles earlier this month using variables to define the font-family and font-weight, with values defined for each brand using modes. Initially, it appeared to be working. However, things now break when I apply “body/bold” and change to one of the brand modes. Brand 1 (default/white-labeled brand)'s body font uses Semi Bold, Brand 2 uses Medium, and Brand 3’s font uses Semibold.


If I disconnect the text layer from the style after noticing it appears to be “stuck” while trying to toggle modes, I find that it is trying to apply Semi Bold to Brand 2, which isn’t an option for that font, instead of applying the value outlined for that mode.

Reply


Terms & ConditionsCookie settings