Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

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

At a glance

The community member is using the Google font Poppins for headings on their website, but the extra bold italic variant is not applying. This issue also occurs with other fonts like Work Sans and Inter. The font weight options shown in the dropdown are confusing, as they include "600 - Semi bold" and "800 - Extra bold" even though the community member has uploaded "Bold" and "Black" variants. The community members have tried re-uploading all the font variants, but the "Black" weight is still not showing up. Other community members have experienced similar issues with other fonts, and they suggest using a variable font or a single font file that includes all the required variants to avoid this problem.

Useful resources
SSony Antony
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.
O
S
D
20 comments
OOleg Isonen
so the option is in the style panel available but on canvas it doesn't render as such?
OOleg Isonen
If yes, then the reason is that font doesn't actually support that option
SSony Antony
It's a Google font and there it shows all the variants. - https://fonts.google.com/specimen/Poppins
SSony Antony
I was wondering if there was any settings that I missed on Webstudio.
OOleg Isonen
did you reupload it to webstudio ?
SSony Antony
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.
SSony Antony
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
OOleg Isonen
I think you are creating a mess there. If you uploaded 6 separate font files, user will have to download 6 giant font files
OOleg Isonen
try getting a font file that has all ariants you need
OOleg Isonen
also ideally use a variable font
OOleg Isonen
variable font lets you use just one font for most things
SSony Antony
Sure, got it. Thanks for that.
DDragan Babic
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.
OOleg Isonen
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
OOleg Isonen
we do try to detect the support of the font directly in the browser using real rendering
SSony Antony
I also have the same issue as @Dragan Babic I have mentioned that above and given a screenshot.
OOleg Isonen
I need to see the font. Please upload it here
DDragan Babic
Here it is @Oleg Isonen
OOleg Isonen
What are the weights that you expect it to support?
SSony Antony
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