Archived topic
Font weight 500 not working on mobile
5 replies · Started by Ricardo on December 22, 2020
Hi,
I want to show different font weight on desktop and mobile devices.
For desktop I'm using 600 and for mobile and tablet I would like 500.
I added this CSS
@media (max-width: 1024px) {
h1, h2 {
font-weight:500;
}
}
But it has no effect. I've tested if 500 worked on desktop and it does.
Since most of the h1 will be hero titles, I've also used .page-hero h1, .page-hero h2,
I also tried to use important but it was ineffective.
What do you recommend me to do?
You can check here:
https://wordpress-89823-1605306.cloudwaysapps.com/fado-porto/
Thanks in advance,
Ricardo Pons
Hi there,
i can see the H1 Page hero font size changing. Update you CSS to this:
@media (max-width: 1024px) {
.page-hero h1,
h1,
h2 {
font-weight: 500;
}
}Then make sure you clear any browser caches.
Hi,
I'm sorry, but it still doesn't work. It is showing 400 instead of 500.
Aah ok - Crimson Pro is a Variable Font - so the regular customizer settings will not work.
If you go to Google Fonts, and select Crimson Pro, then select the Font Styles you require it will generate a Link like this:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600&display=swap" rel="stylesheet"> Once you have that code, use a Hook Element to add that link to the wp_head hook:
https://docs.generatepress.com/article/hooks-element-overview/
Set the Display Rules for the Entire site. That should then allow you to apply the different style variants.
Thank you!
Wasn't aware of that.
Best regards,
Ricardo
You're welcome
