Archived topic
CSS styling for headers for single posts only
9 replies · Started by Rob on July 22, 2019
Hi GP,
I use Beaver Builder alongside my GP theme, and I'm looking for a way to stylize my single post pages' H2, H3, and H4 tags but NOT the header tags on pages outside of the blog.
I'm just curious how I'd setup the CSS for each header tag on the single posts to play with each header's font family, font weight, font size, font color, text transform, line spacing, and character spacing.
Thank you for all of your help so far!
Hi there,
Simply add body.single in front of each selector like this:
body.single h1 {
font-family: "Lora", serif;
font-weight: 600;
text-transform: uppercase;
font-size: 24px;
}Let me know if this helps :)
Leo — you are the man! Thank you.
Looks like it works on desktop, but not mobile. Anything I might be missing?
It should work for both. Or are you looking for a mobile-specific font as well?
Can you guide me to a section where I can see the issue?
Hey Leo here's one of my h2 headings on desktop:
And here's the same h2 heading on mobile:
Here's a link to that page.
When I try to change the body font, it also seems like everything except the bulleted lists and numbers change.
Best,
Rob
Can you edit the CSS to this?
body.single h2 {
font-family: "PT Sans Narrow", sans-serif;
font-weight: 800;
text-transform: none;
font-size: 32px;
color: #17a387;
line-height: 1.5em;
}Make sure to clear your browser cache.
Let me know :)
Hey Leo,
Thanks a ton for your response.
I cleared browser cache, added the text above, and checked on mobile vs. desktop. It seems like the font is still different for mobile vs. desktop.
I don't know if this is potentially the issue – but maybe my mobile device just doesn't display the font I've selected. – and so it's defaulting to something else. While I feel like the font is pretty common, maybe there are some devices that just don't show it. I have a slightly older iPhone if that matters.
In that case, could I create a mobile "fall-back" option? Or do you think there's something else I still might be missing?
Are you adding the PT Sans Narrow font to the website somehow?
If not, it will only display if the device (PC, phone etc..) has the font installed.
Hey Tom,
The PT Sans Narrow seems to be a Google font. It's one of the dropdown options within GeneratePress' Customizer. I haven't added it to the website manually.
What's confusing is that if I delete out the H2 CSS, and instead, I select PT Sans Narrow via Customizer > Typography > Headings > H2, the font shows up fine on both mobile and desktop.
To me, this suggests that the font is installed on the site, and that something might be going on with the CSS to prevent the font from loading on mobile.
It’s one of the dropdown options within GeneratePress’ Customizer.
Without the font being selected in the customizer once, it's actually not loaded - otherwise we would be loading every single Google font in your site which is not smart.
Do you not want to use PT Sans Narrow anywhere in the customizer setting?
