Body font weight remains bold despite changes in Typography & CSS code

[AtomAntonym]

I would like to change the body font in our blog to be lighter and more reader friendly. It is currently always bold/heavy.

I have tried changing settings in Customizer>Typography as well as adding different fonts. While the fonts change - the bold remains.

Website blog: https://www.allos.com.au/blog/

Based on other posts, I’ve added the following CSS. Letter spacing helped - however the second section of code had no effect.

body {
letter-spacing: 0.05em !important;
}

.x-text {
letter-spacing: 0.05em !important;
}
body .blog { font-family: marcellus, 300; }
.blog p { color: #504646; font-size: 15px; font-weight: 300; }
.blog h1 { color: #073B4C; }
.blog a { color: #118AB2; }
.blog a:visited { color: #FC6960; }
.blog span { color: #FFFFFF; }

[ruenel]

Hello Antony,

Thanks for writing in!

body {
  letter-spacing: 0.05em !important;
}

The first code will apply the line height to all the element globally.

.x-text {
   letter-spacing: 0.05em !important;
}

This line will only be applied to the text and headline element. Actually this code is not necessary because both of the elements has the line height option in the element settings, Text > Text Format. See the image below:

• 

body .blog { font-family: marcellus, 300; }
.blog p { color: #504646; font-size: 15px; font-weight: 300; }
.blog h1 { color: #073B4C; }
.blog a { color: #118AB2; }
.blog a:visited { color: #FC6960; }
.blog span { color: #FFFFFF; }

This css block will only be applied to the blog index page. It will NOT be applied to the archive pages and single posts.

Hope this helps.

[AtomAntonym]

Hi Ruenel,

Thanks for replying. However, my original problem remains.
Inside of my blog, all body text is bold . As you can see in the pics attached; preview text is fine. How can this be?

[christian]

Hey Antony,

Thanks for providing screenshots. That lead me to investigate the correct area and discovered the cause of the problem. It’s a syntax error in your HTML in the Topbar that is causing the issue.

Correcting the HTML should fix the issue. You can refer to this 3rd party site for HTML guidance.

I also found another HTML error in your Footer Content. I’d recommend you fix it too to avoid display issues.

I’d recommend that you always check the HTML codes or any codes before pasting anywhere in your site because it is a common cause of display issues and also causes options to malfunction. You can use validation sites like https://htmlhint.com/ for HTML http://csslint.net/ for CSS and just search on Google for other tools.

Hope that helps.

[AtomAntonym]

Removing that b in header worked.

Awesome,

Thanks.

[christian]

You’re welcome, Antony. Glad that helped.