Hi,
I want to use number variables for font weight so that the variables connection can be displayed in dev mode / inspect panel. However, it seems that the font weight is ignored when applying the text style to text in Figma.
When string variables are used, you get to see the following in dev mode / inspect panel > CSS:
font-weight: 400;
When number variables are used, you get to see the following in dev mode / inspect panel > CSS:
font-weight: var(--Regular, 400);
After creating number variables for font weight and text styles that are connected to the variables:
It seems that the font weight is ignored when applying the text style to text in Figma. When using string variables it does work.
Is this a known issue?
Question
Font weight can't be applied to text if number variables are used
Hi ​
After checking, it appears that the behavior you're observing is expected. When a string variable is used to define a font style's font weight, only the numerical font weights will be displayed in Dev Mode.
I did a quick test and saw the same thing:
- I made two font styles:
- One with a number variable "10" for the font weight.
- One with a string variable "Bold" for the font weight.
- I used those styles on some text and then checked the Typography section in Dev Mode. I saw:
- font-weight: var(--New-group-N_Font-weight, 10);
- font-weight: 700;
Just a quick reminder:
- You can use number variables for font weight, but they have to be numbers (like 400 or 700).
- You can use string variables too, but they have to be font weight names (like regular, bold, or black italic).
You can find more info in this guide: Overview of variables, collections, and modes
Hope that clears things up! Thanks again for contacting us.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.