Join the Webstudio community

Updated 2 months ago

Applying an Extra Bold weight and Italic style results in the font appearing as regular

At a glance
I am using Google font Poppins for headings in the website I am developing.

It has a native Extra Bold Italic variant. Even though the styles are not applying.
This happens with a few fonts that I tried - Work Sans, Inter, Poppins.
And I have uploaded all the variants. The drop down for font-weight shows, 300 - Light, 400 -Normal, 600 - Semi bold and 800 - Extra bold.
This is also confusing. Why "600 - Semi bold and 800 - Extra bold" even though I had uploaded "Bold and Black" ?

Please help me with this.
Attachment
image.png
O
S
D
20 comments
so the option is in the style panel available but on canvas it doesn't render as such?
If yes, then the reason is that font doesn't actually support that option
It's a Google font and there it shows all the variants. - https://fonts.google.com/specimen/Poppins
I was wondering if there was any settings that I missed on Webstudio.
did you reupload it to webstudio ?
yes, Earlier, I only added 6 variants (including italics). And later I have added all the variants available.
And I got 6 toss messages saying the asset exists. I assumed that was for the 6 variants I uploaded earlier.
Just now, I cleared all the fonts I uploaded, quit from my project.

Reopened the project and re-uploaded all font variants. Now it's showing all the variants except for "Black".
Attachment
image.png
I think you are creating a mess there. If you uploaded 6 separate font files, user will have to download 6 giant font files
try getting a font file that has all ariants you need
also ideally use a variable font
variable font lets you use just one font for most things
Sure, got it. Thanks for that.
Unfortunately I don't have a solution for you, but the same thing happens to me when using the Bricolage Grotesk (via my upload, not from Google Fonts). The 800 weight is greyed out even though it has been uploaded and works in other places.
Afaik this was a different problem here, but lets check your fonts, please share them here and I will validate if your fonts actually work with that weight and our detection is wrong
we do try to detect the support of the font directly in the browser using real rendering
I also have the same issue as @Dragan Babic I have mentioned that above and given a screenshot.
I need to see the font. Please upload it here
Here it is @Oleg Isonen
What are the weights that you expect it to support?
The font weight Balck - 900 is not accepted.
Instead of 900, I tried using 800. But then the italic variant of 800 is not applying.
Add a reply
Sign up and join the conversation on Discord