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?
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:
Exactly same problem here.
I noted when I was editing the font files to merge the families.
I just remembered that the developers can view the correct font weight in the CSS Table view in the Inspect tab:
interesting. but it seems like a figma bug that the correct values aren’t visible in the other places, right?
Really nobody cares about this bug.
This is causing serious issues inside my team.
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?
This has caused issues for me as well. Lots of confusion due to this bug.
The same problem
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?
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
We experience the same issue. This has been reported for 6 months already. When this can be fixed?
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.
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…
Font style is available in the panel without the need to search, so not sure what you mean:
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:
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
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
Inspect in Table View
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.
I think this is a serious problem. Using the same font file, the problem only occurs in MacOS.
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…
