Skip to main content

Show Font Weight in Inspect panel


Shelene_Lee

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

94 replies

Gleb
  • Power Member
  • 4706 replies
  • February 27, 2021

100% would love this fixed. It’s so strange.


Filip_Wroblewski

It seems that the developers are frequently seeing incorrect font-weight in the inspect panel.
Not sure what this problem is dependant on as it was present with different fonts, weights and files.

Example:


Tiago1
  • 9 replies
  • March 31, 2021

Exactly same problem here.
I noted when I was editing the font files to merge the families.


Gleb
  • Power Member
  • 4706 replies
  • April 5, 2021

I just remembered that the developers can view the correct font weight in the CSS Table view in the Inspect tab:

CSS table view Inspect tab, Font style: Medium


Jonathan_Arnold

interesting. but it seems like a figma bug that the correct values aren’t visible in the other places, right?


Tiago1
  • 9 replies
  • May 26, 2021

Really nobody cares about this bug.
This is causing serious issues inside my team.


h.rude
  • 42 replies
  • June 11, 2021

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?


Chris21
  • 1 reply
  • June 30, 2021

This has caused issues for me as well. Lots of confusion due to this bug.


Anna_Os
  • 1 reply
  • July 5, 2021

The same problem


Fliqle
  • 1 reply
  • July 7, 2021

Hello. We have our own Mail Sans font installed. When using the Medium font, in different files, the font-weight in the inspector is different. In some files it is 400, in others it is 500. And the location of the item in the settings is also different. Can you help and suggest how to fix it?


Jess3
  • 1 reply
  • July 9, 2021

Anyone have any updates on this issue? We are seeing this on my team as well. In the design tab, the font style is clearly set to bold, but in the inspect panel, it says 400 / normal. For some reason, though, if you look at the iOS code in the inspect tab, it’s correct (it is incorrect in CSS and Android).


VladimirK

We are seeing something similar, according to some posts I’ve seen Figma seems to infer the weight from the font name and a mapping table somehow…


Kristian_Larsen

I have the same issue. We have developed our design system that the developers are inspecting during development and because of this Bug the have been creating components with the incorrect font weight.
Would love to have this bug bumped up the list


Nikita8
  • 1 reply
  • August 11, 2021

We experience the same issue. This has been reported for 6 months already. When this can be fixed?


Han
  • New Member
  • 1 reply
  • August 11, 2021

I know, yes, this is a problem for developers, that’s why it’s a common practice to create UI kits/reference sheets for developers and styles for texts so they know which style corresponds to which weight.

Gleb, you sounded like ‘because the public transportation has an issue, people should buy their own cars…’ Of course, having a UI kit is good practice for any product team. But this issue is not the reason to do that.


Gleb
  • Power Member
  • 4706 replies
  • August 12, 2021

I’m not saying it’s supposed to be like that. I wanted to point out exactly this problem — that people who don’t need it have to drive cars because there is no public transportation.


mmcdaniel
  • 9 replies
  • August 13, 2021

Is there any confirmation that this is actually a bug? It’s a pretty big issue with the inspect panel if I have to supplement those values and the CSS with a spec sheet just so someone can see the font-weight that I’m seeing on my end but they’re not for an inexplicable reason. Is it like a difference in license between the “designers” and “devs” in these cases?

Also might be worth noting that font-style is also missing…


Gleb
  • Power Member
  • 4706 replies
  • August 13, 2021

I don’t know if this is considered a bug but you can find the weight in the inspect panel: Show Font Weight in Inspect panel - #5 by Gleb

Font style is available in the panel without the need to search, so not sure what you mean:

image


mmcdaniel
  • 9 replies
  • August 16, 2021

What I mean is that, without using the “Table” view, font-stlye is missing along with font-weight. People shouldn’t have to switch to that table version of the view to see all the details of the object — especially when someone else can see all those details in both views.

Feels like a bug to me if there’s any time someone sees something different from what someone else sees in the inspect panel.

For what it’s worth, I’m seeing different things in the table view vs the code view. It does show font-style but no font-weight:


Gleb
  • Power Member
  • 4706 replies
  • August 16, 2021

I totally agree, just wanted to share a workaround.

That’s weird. You also have two font heights there. What’s that about? o_O


Logan
  • 1 reply
  • August 18, 2021

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
  • 9 replies
  • August 20, 2021

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.


Shuaiqi1_Wang

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


Tiago1
  • 9 replies
  • August 31, 2021

No news?


linkus
  • 1 reply
  • September 3, 2021

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…


Reply


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