Show Font Weight in Inspect panel

Forum|Forum|5 years ago
February 24, 2021
94 replies
26847 views

When inspecting the following component, I can click on the font to see the font weight and style in the inspect panel. When my dev clicks on the same item, he does not have all the CSS information that I have in the inspect panel, specifically he is missing font weight and font style. He does not have the ability to see the different font weights, which is unacceptable. Is there some way to fix this?

Component with my inspect panel:
Screen Shot 2021-02-24 at 10.12.33 AM

My (designer) Inspect panel:

Developer Inspect Panel:

✏️ Note from the moderator

There is a way to see the actual font weight, but it’s hidden and inconvenient: Show Font Weight in Inspect panel - #5 by Gleb

Share an idea

Show previous replies

Logan

We are also experiencing the issue where developers are not seeing the correct font-weight when using the inspect panel. You can see that the font-weight is listed as “normal” which will not render the proper style of the font (bold) if used.

Inspect in Code View
Screen Shot 2021-08-18 at 11.01.53 AM

Inspect in Table View
Screen Shot 2021-08-18 at 11.03.25 AM

mmcdaniel

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.

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

Shuaiqi1_Wang

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

Tiago1

No news?

linkus

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…

coolemur

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.