Fine-tuning font-weight

Hi there,

This depends on the font itself. A specific font-weight value will only change the font’s display, if the font itself has a font face available for the specific font-weight.

You can find a more detailed explanation, along with some examples, here:

https://css-tricks.com/almanac/properties/f/font-weight/

Looking at https://fonts.google.com/specimen/Montserrat#about it appears that font does have font faces for all the different weights, but depending on font size there can still be very little difference between them.

It’s possible that you’re not actually loading all the available font faces on the site – in most cases you’ll only load the font faces you’ll actually be using on the site, so as to not load unnecessary resources which would increase your site’s total size and load time. You might be able to check that in your fonts plugin.

It’s also possible that there is more specific CSS somewhere else on the site that’s overriding whatever CSS you’re adding in the Customizer to set the font weight. To confirm that you’ll need to look at all the CSS being applied to the specific element that’s not reflecting the font weight to find the CSS selector you need to target for your custom CSS to work. (You can also try !important, but in most cases that’s not a great idea ?? )

Hi @kokkieh,
Thanks so much for your suggestions.

re:

… depending on font size there can still be very little difference between them.

It’s possible that you’re not actually loading all the available font faces …

I thought about these two possibilities too, but I think that’s not the case, because when I go to the Typography section in the Customizer and change the “Default Typography” for “Paragraph” I can select every weight from 100 to 900 and each different setting visibly alters the font weight. So from that I assume that (a) these weights are in fact distinguishable visually, and (b) that they are loaded. But where would I go to check in the fonts plugin if they are actually loading?

It’s also possible that there is more specific CSS somewhere else on the site that’s overriding whatever CSS you’re adding in the Customizer to set the font weight.

That’s what I assume is the case. But the weird thing is that the custom CSS does have an effect for some weights but not others. Not just for strong but even if I do this:

.entry-content p {
	font-weight: 100;	
}

Setting it to either 100, 200, or 300, all produce 300.
Setting it to 400 and 500 produces 500.
And everything 600 and above produces what looks like 700.

So it seems that I am selecting the right element but just that there is some setting that interprets 100, and 200 as if I had put 300, etc.
And I have no clue where to look for that…
Or am I misunderstanding something?

PS: yes, I even tried !important but it didn’t have any effect ??

One quick way to rule out whether it’s Pique or the font is to try a different font. Try one that’s already on your system and has lots of different weights. And if you use Inspect Element, you can see your changes live, without having to edit CSS.

For what it’s worth, I know OpenSans comes with a ton of weights (no pun intended!)(okay maybe a little), so you could try that to see if you see any difference. And you can see that in action along with a how-to here:
https://css-tricks.com/almanac/properties/f/font-weight/

Oh here we go. I took a look at what faces Google was including in your site. You can find them here:
https://fonts.googleapis.com/css?family=Montserrat%3A300%2C500%7CCormorant+Garamond%3A600%2C300&subset=latin%2Call&ver=5.7.2

My eyes were apparently glitching between the 400 and 500 since I don’t see 400 in the list.

One quick way to rule out whether it’s Pique or the font is to try a different font. Try one that’s already on your system and has lots of different weights.

Great suggestion, yes, so I did that and I tried with Open Sans.
Same problem. ??
Only three settings produce a change despite the fact that it offers many more weights. Does that mean there’s some setting in Pique that forces it to ignore some of the weight settings in some selectors?

… faces Google was including in your site …

How shall I interpret that list? Is this what the plugin loads/is capable of loading? Or are these the faces that are currently in use. Given that I couldn’t get it to work, at the moment these are indeed the only faces/weights I am using. (So I’m not expecting any other weights to be listed, if it’s just the list of what is currently in use).

But to test, I have now added a snippet:

.entry-content p  {
	font-weight: 100;	
}

Does that make a difference?

How shall I interpret that list? Is this what the plugin loads/is capable of loading?

It is what the plugin is loading, and the list I see only mentions a few weights. I’m not sure what it’s capable of loading, as I haven’t used the plugin. You’ll need to double check with their support. But, I understand you’d need to select every font weight on the Montserrat page for the kit.

Regarding whether that makes a difference, you’ll know better than we would since you’re seeing the changes live.

I do think it’s a matter of not loading all of the font weights, though.

I do think it’s a matter of not loading all of the font weights, though.

OK, great, I’ve posted on the google fonts plugin support forum. Will report back here once they respond.

Don’t you think it’s weird though that selecting the different weights in the Typography panel works flawlessly (hence they all must be loaded somewhere), but selecting them in the Custom CSS panel doesn’t?
How does what I enter in the Typography panel behave differently from what I enter in the Custom CSS panel?

How does what I enter in the Typography panel behave differently from what I enter in the Custom CSS panel?

That’s probably a better question for the general support forum, as the Customizer, including the custom CSS feature, is part of WordPress itself, not the theme.

Though the Typography section again is added by your plugin, not a part of WordPress, so maybe the plugin developers are in a better position to comment on this ??

… the Typography section again is added by your plugin, not a part of WordPress, so maybe the plugin developers are in a better position to comment

Yeah, I haven’t heard back from them on their support forum yet.

However, I played around some more and deactivated the plugin and then added the very same fonts from Google Fonts manually following the instructions listed as “Method 2” here.
And … everything works fine, I can select every font-weight that the font has without any issues. So it’s clearly a problem of the Easy Google Fonts plugin not loading all of the font weights.
Thank you all for your helpful comments here, I’ll mark this as resolved on this forum but will keep waiting for a reply from Easy Google Fonts on the other thread.

Thanks for letting us know you’ve confirmed it’s the plugin ??