Skip to main content

Configure font weight and font style separately

Johnson_Ryan

It’s great that I can use variables within Text styles, but there’s a large problem with configuring font weight. I want to use number variables for my font weights. Unfortunately, if I want italics, I am forced to use string variables for my weights.

Figma clearly has logic to isolate font-weight and font-style from the chosen weight configuration in the UI (as seen in CSS code output), so why can’t I configure these two properties separately and Figma recombines them on the backend to identify the font face to load?

3 replies

S
  • Shan
  • 1 reply
  • May 21, 2024

And when we use string variables for font weight and font style, those two properties won’t be shown as varibales in CSS code output, it’s a huge problem when it comes to mapping designs tokens …
We (Designer and Devs) really need the possibility to set font weight and font style separately! @Figma_Moderation

A
Franco_Andrade
nikitapashinsky
5 people like this
  • A
    Anastasiya_Larina
  • Franco_Andrade
    Franco_Andrade
  • nikitapashinsky
    nikitapashinsky
  • Daraa_Design_Team
    Daraa_Design_Team
  • Leter
    Leter
Franco_Andrade

​@Shan ​@Johnson_Ryan have you guys found any work around for that problem?

Johnson_Ryan
  • Johnson_Ryan
  • Author
  • Active Member
  • 25 replies
  • September 15, 2025

The simple solution for us was to avoid defining italic text styles. If copy needs to be italic, it can be applied ad-hoc (which aligns with how HTML/CSS would be applied on top of a base style).

Doing this, we were able to define entirely numeric weights.

Franco_Andrade
1 person likes this
  • Franco_Andrade
    Franco_Andrade

Reply


Terms & ConditionsCookie settingsAccessibility statement

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings