[Resolved] Font weight 500 not working on mobile

[Ricardo]

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

[David]

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.

[Ricardo]

Hi,

I’m sorry, but it still doesn’t work. It is showing 400 instead of 500.

[David]

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.

[Ricardo]

Thank you!

Wasn’t aware of that.

Best regards,
Ricardo

[David]

You’re welcome

[Author]

Posts