Why aren't all font weights available on my site?

Report · Aug 05, 2020

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

Report · Aug 05, 2020

Font-weight rendering varies by browser and the CSS code used in your site.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 05, 2020

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.

Report · Aug 05, 2020

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/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 05, 2020

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?

Report · Aug 05, 2020

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 22, 2020

Did anybody figure this out? I have the same problem 😞

Report · Aug 05, 2020

I just tried it on my site, too. Grrrr.......

Report · Apr 02, 2024

So I was having issues where all of a sudden all of the fonts on my site were super bold - it's been up for a couple of years and a couple of weeks ago this happened out of the blue - I assumed it was a plugin conflict or something, couldn't figure out for the life of me what was happening, but seemed to be the same issue that the site was only able to call light or bold versions of the font (I wanted to use 300 (light), 400 (regular), and 500 (medium) as the darkest, however the only weights that would work were 300 or 500 (which was more bold than the actual font)… anyway started digging around more and at one point tried deleting and readding the fonts - it's possible that this is what did it because for a short time, safari wasn't displaying the correct font at all—OR what I think actually solved it because both safari and chrome started to display everything correctly after I changed my font from 'Brandon Grotesque' - which was how adobe displays it when you create the web project - to "brandon-grotesque" which is how it is displayed in the typekit style sheet. (the really odd thing is that when I started out digging I realized that my typekit stylesheet link wasn't even in my web projects - I never deleted it, it just didn't exist anymore, so I'm not sure if I had created it prior to some kind of change with adobe fonts/typekit?) I hope some of this will be helpful to someone, I don't really know what solved it because I just kept trying anything I thought might work!

Report · Apr 02, 2024

You've resurrected a 4 year old topic.

To use Adobe Fonts (formerly Typekit), first create a web project, activate fonts and paste the embed code from your Fonts page into the <head> tag of your HTML document.

Add font-family rules to your stylesheet. Save and upload changes to your server. See link below for more details.

https://helpx.adobe.com/fonts/using/add-fonts-website.html

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Why aren't all font weights available on my site?