[Resolved] Changing fonts for the blog and its posts alone

Home Forums Support Changing fonts for the blog and its posts alone

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1487649
    Vinod

    Hello.

    I’m using the GP Bold theme. The font overall is pretty good.

    However, it isn’t the best for long reads and posts. I’d like to use a cleaner serif font.
    How do I tweak the theme’s font settings so it only changes the font for the blog and the full-post views?

    #1487661
    Elvin
    Staff
    Customer Support

    Hi,

    Have you tried playing around with Customizer’s Typography settings?
    https://docs.generatepress.com/article/typography-overview/

    Everything else outside of its functionality can be done through CSS. Just let us know w/c specific texts you need any help with it.

    A wise man once said:
    "Have you cleared your cache?"

    #1487687
    Vinod

    I have tried that yes. Any change in typography settings there are site-wide. That is not what I’m looking for.I’d like to pick different fonts for the blog and the full-post pages alone.

    >>Everything else outside of its functionality can be done through CSS. Just let us know w/c specific texts you need any help with it.
    I’m not a programmer. What would you mean by ‘specific texts’?
    I’m obviously hoping to change all headings and body font on the blog and full-post pages…

    #1487694
    Elvin
    Staff
    Customer Support

    …I’d like to pick different fonts for the blog and the full-post pages alone.

    This is definitely doable w/ CSS.

    I’m not a programmer. What would you mean by ‘specific texts’?
    I’m obviously hoping to change all headings and body font on the blog and full-post pages…

    Don’t worry, we can assist you through it w/o coding knowledge.

    That said, can you tell us which font do you want to use?

    A wise man once said:
    "Have you cleared your cache?"

    #1487709
    Vinod

    >> This is definitely doable w/ CSS.
    That’s great.

    >>That said, can you tell us which font do you want to use?
    I’ll try a few combos and update. Unfortunately, I’m not a designer either. Is it possible to get suggestions from your design team on which font would work better. All I’m looking for is clean, well-readable serif font which goes well with the existing theme.

    If that isn’t possible, I understand.
    I’ll update in a few hours.

    #1487729
    Elvin
    Staff
    Customer Support

    I’ll try a few combos and update. Unfortunately, I’m not a designer either. Is it possible to get suggestions from your design team on which font would work better. All I’m looking for is clean, well-readable serif font which goes well with the existing theme.

    This is pretty subjective. It really depends on what’s the intended look and feel of the site. Different styles of serif fonts convey different feel. Some look like they’re for fashion magazines while others look like they’re used for IT stuff.

    But if for the sake of suggesting, Roboto Slab and/or Playfair Display are safe picks. They’re pretty commonly used as they’re pretty good.

    Or you can pick what you want here – https://fonts.google.com/?category=Serif

    Once you’ve picked the font to use, you’ll have to add them to your site to be able to use them.

    You can customize the google fonts your site uses by following this guide – https://docs.generatepress.com/article/customizing-the-google-font-list/

    Or you can follow this guide if you want to host your fonts locally.
    https://docs.generatepress.com/article/adding-local-fonts/

    After that, you can simply add the necessary CSS for your site:

    Example: (using Playfair Display)

    body *{
    font-family: 'Playfair Display', serif;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1487760
    Vinod

    Thank you.

    These are the fonts I’d like.

    – Merriweather 15pt for body text
    – Montserrat for headings(H1 to HX)

    To re-emphasize, this font change needs to happen only for the /blog page and the full-post pages. If both aren’t possible, then at least for the full-post page.

    I already have google fonts installed.

    Could you help with the CSS? Contents, where it needs to be added and such?

    #1487771
    Elvin
    Staff
    Customer Support

    You can try these CSS codes:

    body.single, body.blog h1, h2, h3, h4, h5, h6{
    font-family: 'Montserrat', sans-serif;
    }
    
    body.single, body.blog p{
    font-family: 'Merriweather', serif;
    }

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

    Note: This will only work if these font families are properly imported to your site for use.

    If these don’t work, you may have to do this guide for Merriweather and Montserrat.
    https://docs.generatepress.com/article/customizing-the-google-font-list/

    A wise man once said:
    "Have you cleared your cache?"

    #1487828
    Vinod

    This is what I tried. It did not work.

    1. Installed Simple CSS
    2. Navigated to the page in the dashboard. In my case ‘/blog’.
    3. Scrolled down to the Simple CSS box, pasted the code and saved.

    No change.

    If these don’t work, you may have to do this guide for Merriweather and Montserrat.
    https://docs.generatepress.com/article/customizing-the-google-font-list/

    This doesn’t seem to be a problem either. For one, these fonts are already part of the Bold Theme. And two, Google fonts shows the top 200 fonts and both of these are visible.

    1. Where did I go wrong in the steps?
    2. I also would prefer not to go to each and every post and paste this code. If this does work, how do I make it so all full-page posts use the updated font settings?

    #1488293
    David
    Staff
    Customer Support

    Hi there,

    you will need to enqueue the fonts for them to be accessible with CSS. The customizer only enqueues fonts that are assigned to an element in the Customizer.

    The simplest method is:

    1. Go to fonts.google – select the font and the styles. Then click the 4 square menu item ( top right ) where you can add more styles if required, then select the Emebed option. It will provide the embed eg.

    <link href="https://fonts.googleapis.com/css2?family=Commissioner:wght@100&display=swap" rel="stylesheet">

    2. Now create a Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Add your link code. Followed by this CSS:

    <style>
    h1, h2, h3, h4, h5, h6{
        font-family: 'Montserrat', sans-serif;
    }
    
    body {
        font-family: 'Merriweather', serif;
    }
    </style>

    Thens select the WP_head hook.
    And now set your Display Rules for the Posts and Blog

    #1489677
    Vinod

    Thank you. Let me try this out and post an update

    #1489696
    Vinod

    That work phenomenally well.

    Thank you!

    #1489813
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.