Setting font for Body of whole site [styles are per page currently]

Tagged: ,

Author Posts

blokartphil December 6, 2015 at 5:16 am

How can I set the font the the body of whole site?

Sebastian December 7, 2015 at 10:28 am

Hey, could you post a link to your site so that I can advise you further?

Thanks!

blokartphil December 8, 2015 at 8:21 am

Hi, thanks for the response.
I am building a new site http://capitalblokartclub.org.nz/newsite/
The fonts are showing differently on pages and I want to set the body font for the whole site if I can. Do you think that will fix my problem?
You can see what I mean on these pages (they were put together differently), one with native WP tools and one with page page builder.
http://capitalblokartclub.org.nz/newsite/the-club/tips-and-tweaks/beginners-guide-to-blokart-sailing/
http://capitalblokartclub.org.nz/newsite/the-club/tips-and-tweaks/beginners-guide-to-blokart-sailing-2/

Sebastian December 9, 2015 at 11:40 am

Hey,

I see that the content of the two pages are the same. So you will only develop one of them right? (the other is a test of some sort). Regardless, the fonts on both pages are being set by the same set of CSS rules. Your theme is outputting the following CSS in the HTML head of the page:

(I’ve only included the selectors that relate to font-family)

#masthead h1 {
    color: #ffffff;
    font-size: 24px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article h2 {
    color: #2b2b2b;
    font-size: 36px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article h3 {
    color: #2b2b2b;
    font-size: 28px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article h4 {
    color: #2b2b2b;
    font-size: 24px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article h5 {
    color: #2b2b2b;
    font-size: 18px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article h6 {
    color: #2b2b2b;
    font-size: 16px;
    font-family: 'Lato';
    font-weight: 700;
}
#content article p {
    color: #2b2b2b;
    font-size: 16px;
    font-family: 'Lato';
    font-weight: 100;
}

These style rules mean that if you set a global font-family on the body element, your font-family rule get overridden by all of the above font-family definitions, because they have higher CSS Specificity. The cleanest approach would be to remove the above selectors that set font-family on headings and paragraphs individually. Then you can simply set the font-family on the body element. Your chosen font will then be inherited by all of the headings and paragraphs.

Do you know if the above rules have been generated by theme options that you can disable? if not, another option would be to create a single comma separated selector in Microthemer which overrides all of the selectors your theme generates for setting the font:

#masthead h1,
#content article h2,
#content article h3,
#content article h4,
#content article h5,
#content article h6,
#content article p

You can manually create selectors via the (+) icon when hovering over folder names in the main menu at the top left.

Cheers,
Sebastian

ps the font-weight for your paragraphs (#content article p) has been set to 100. This makes the text so light it’s quite hard to read in Chrome.

blokartphil December 10, 2015 at 10:01 am

Thanks for your quick response and your help on this.
Yes, only one of these pages will go into production.

Ah, the font weight!
You would have noticed on the page(s) that the font changed and that is why I was trying to find a way of overriding the body font. I could not understand how the font changed after the h4 heading, where the bullets are supposed to start.
<h4 style=”line-height: 24px;”>safety comes first</h4>

  • never leave your blokart® unattended.

    • There seems to be problems with this theme and while Microthemer may help me tweak parts, I may have to get another theme.

Sebastian December 15, 2015 at 12:15 pm

Thanks for the update. Please let me know if you need further assistance.

You must login or register to reply to this topic.