Show Font Weight in Inspect panel

Yeah I don’t know! It’s also weird that in the code view it’ll show “identical to … 120%” but then show 101% on the duplicate rule shown in the table view.

image

This also shows up with different font sizes. e.g., 14/20 showed different percentages and they still didn’t match.

1 Like

I think this is a serious problem. Using the same font file, the problem only occurs in MacOS.

2 Likes

No news?

I’m amazed this bug still was not fixed. We too have actually had to adjust our dev handoff process (which adds a lot of hours) to be able to work with this bug…

3 Likes

Some details about this issue:

Figma shows:

Table view: Font style: Regular
Inspect view: font-weight: normal; (correct)
Typography: Weight 400 (correct)

Table view: Font style: Medium
Inspect view: font-weight: normal; (should be displayed as font-weight: 500)
Typography: Weight 400 (should be displayed as Weight 500)

According to Font Weight and Contrast: (just google “font weight regular in points”):

font-weight === typeface weight

400, regular === Normal, Regular
500 === Medium

Conclusion: Figma doesn’t detect medium fonts correctly.

5 Likes

Same problem here!! Any idea when this will be fixed. Any comment by a Figma representative? This bug creates problems with handovers to our devs.

Figma team, please fix this !

4 Likes

We also encounter this issue, the workaround is asking developers to install this font on their computers.

1 Like

Same issue here, this is a very serious issue, please fix it.

Also have this extremely frustrating issue! Still no fix?

LOL almost a year late… and no fix yet.

This is the best bad example of “who develops, does not use”.

Probably they have no idea how is the workflow/hands up process from designers to devs and how this impact the team.

3 Likes

No updates yet?

1 Like

When will this be fixed Figma? This makes handoff so tiresome.

1 Like

I’m using poppins as font face, downloaded from google fonts and it comes with a lot of styles. Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black. But when checking the inspect mode, it only shows “normal” and the font weight changes. But this leads to confusion regarding the handoff to Web Development. Because using “regular” with the shown font weight leads to strange outcome.
Is there something I can do? Or is this a bug?

5 Likes

The same problem

2 Likes

Same problem here

1 Like
  1. Some fonts don’t have 400 size but in the design panel displayed 500 while inspect panel displayed 400.

  2. Font ‘Museo Sans’ for instance.

  3. Is it a bug? Can it be fixed?

Same problem here, 9 months later and no news from Figma… this is worrisome

1 Like

The key here is that devs don’t see the font-weight where designers do. This issue has to do with access rights, because devs typically have read-only access to the design files. Hope this rings a bell in the Figma dev team…

Please, this is a confusing bug that needs more attention.

+1
We also suffer from this nasty bug. Incorrect font-weight showing in CSS inspect panel.

Interestingly “font-weight: Medium” is not actually valid (see font-style - CSS | MDN) but I guess since its Table view it is not displaying css 1:1 accurately. Currently this is just a mediocre workaround for our developers to see if a font uses a medium font style or a regular. Using either Regular or Medium both results in a font-weight: 400; which is incorrect for Medium (it should be 500 or 600 depending on the font-family).
Meh… this is really bothersome, please fix it Figma!

Any update on this issue? This is causing some serious implementation issues with our team.

1 Like