[Resolved] Font weight 500 not working on mobile

Home Forums Support [Resolved] Font weight 500 not working on mobile

Home Forums Support Font weight 500 not working on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1590414
    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

    #1590438
    David
    Staff
    Customer Support

    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.

    #1590461
    Ricardo

    Hi,

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

    #1590512
    David
    Staff
    Customer Support

    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.

    #1590572
    Ricardo

    Thank you!

    Wasn’t aware of that.

    Best regards,
    Ricardo

    #1590577
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.