Show Font Weight in Inspect panel

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:


:pencil2: 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

3 Likes

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

3 Likes

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:

2 Likes

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

1 Like

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

5 Likes

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

3 Likes

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

9 Likes

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

1 Like

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?

6 Likes

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).

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…

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

3 Likes

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

2 Likes

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.

2 Likes

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.

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…

2 Likes

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

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:

1 Like

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

2 Likes

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

1 Like