- This topic has 16 replies, 5 voices, and was last updated 1 year, 5 months ago by Ying.
-
AuthorPosts
-
October 13, 2020 at 5:28 pm #1487649Vinod
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?October 13, 2020 at 5:45 pm #1487661ElvinStaffCustomer SupportHi,
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.
October 13, 2020 at 6:19 pm #1487687VinodI 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…October 13, 2020 at 6:29 pm #1487694ElvinStaffCustomer 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?
October 13, 2020 at 6:44 pm #1487709Vinod>> 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.October 13, 2020 at 7:14 pm #1487729ElvinStaffCustomer SupportI’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; }
October 13, 2020 at 8:02 pm #1487760VinodThank 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?
October 13, 2020 at 8:22 pm #1487771ElvinStaffCustomer SupportYou 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/October 13, 2020 at 9:30 pm #1487828VinodThis 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?October 14, 2020 at 4:28 am #1488293DavidStaffCustomer SupportHi 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 BlogOctober 14, 2020 at 11:02 pm #1489677VinodThank you. Let me try this out and post an update
October 14, 2020 at 11:21 pm #1489696VinodThat work phenomenally well.
Thank you!
October 15, 2020 at 12:57 am #1489813DavidStaffCustomer SupportGlad we could be of help
September 30, 2022 at 6:37 am #2358773LilianaCan i get css help for changing the link style to bold and underline, but only to apply to text inside a blog post, thank you!
a:link {
text-decoration: underline;
font-weight: bold
}September 30, 2022 at 12:12 pm #2359219YingStaffCustomer SupportHi Liliana,
try this:
.single-post .entry-content a { text-decoration: underline; font-weight: bold; }
If it doesn’t work, please open a new topic and link us to your site.
-
AuthorPosts
- You must be logged in to reply to this topic.