Copy link to clipboard
Copied
I'm creating a site in Wordpress with the Elementor page builder and the Astra theme. I'm using Adobe fonts, and I'm having trouble with the Pelago font. I've activated all the font weights, and they also show up under my web project, and in the Adobe Font area of my website. However, when I'm actually using the font, only two weights show, From 200-500 it's the "normal" weight, and anything above is the "bold." weight.
I've used other fonts with Elementor and Astra and have had the choices, so I'm wondering what's going wrong now. (If this is not a Fonts questions, but rather an Elementor question, let me know.)
Copy link to clipboard
Copied
Font-weight rendering varies by browser and the CSS code used in your site.
Copy link to clipboard
Copied
I just did a little experimenting, and it looks like ALL fonts are restricted in this manner. I wonder if something in the theme's style sheet is suppressing the font weights. The good thing about Elementor is that you don't normally have to write a lot of custom code (it does it for you) but it sounds like we have to write custom code to allow for the font weights.
Copy link to clipboard
Copied
When you finally chase down the culprit, you may need a CSS !important
rule to override it.
https://css-tricks.com/when-using-important-is-the-right-choice/
Copy link to clipboard
Copied
If Chrome's developer tools are any indication, even !important won't help. I've tried all the weights, and still get the same result. Maybe Chrome won't show anything different?
Copy link to clipboard
Copied
Chrome has always been buggy about font-weights. They fix one problem and break it again in other versions.
This is what MDN says about font-weight.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Copy link to clipboard
Copied
Did anybody figure this out? I have the same problem 😞
Copy link to clipboard
Copied
I just tried it on my site, too. Grrrr.......