Change font weight from 400 to 300

[Paul Cato]

Hi Bill,
Glad to have found you last week, Bill, and to have purchased the collection!

I’m only about half way into making by site, but I have been really struggling with this:

I would just like to make my fonts lighter, across all headers and content. Currently I’m using Raleway, but I would hope to be able to do this easily for any font that has various font-weight options in Google fonts. If Normal is 400, then I want my main content to be at 300, and then I’ll figure out what the headers will be. (But I suspect I’ll want some headers at 300, and some at 400 or more.)

So I’m real confused after trying all sorts of things. I’ve tried updating the Theme Options> Advanced> Custom Google font name and family to represent the 300 weight (of the Light version), using all sorts of syntax, but no joy. And I have tried several different things in the CSS without working properly. I did get it working one time with a CSS edit, but the widgets were still in the 400 weight (normal). And I could change just the Headers’ weight easy enough in the CSS, but the content and widgets still didn’t change.

I’ve tried following the instructions I found on the forum here, for installing new fonts, (Specifically Raleway Light 300) but couldn’t make it work either. I am guessing that the Raleway font is already installed which included all the weights, but I don’t know for sure how that works.

I’m happy to edit the CSS (even though I only have a pretty limited idea of how it works) or using the Advanced tab to add CSS, if you could please just tell me what I should be changing, and where.

Thanks in advance,
Paul Cato

[Bill Robbins]

Hi Paul,

I’m glad you did discover us last week. Thank you for your business. Great question too. The idea here is that we can change the font weight via some additional CSS. What you’ll want to do is go to the Theme Options page and click on the Advanced tab. Scroll down to the Custom CSS box at the bottom and add this:

body {
	font-weight: 300;
}

button,
a.button,
input.button,
input[type="button"],
input[type="submit"] {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
}

.hero-copy .button.hero,
.woocommerce .hero-copy .button-hero {
	font-weight: 600;
}

.slicknav_menu  .slicknav_menutxt {
	font-weight: 600;	
}

That has the font weights that are set in the theme so that you can change the individual elements to different weights if you want to. Any of those you don’t wish to change, you can just delete. Say you don’t want to change the mobile menu, then you could just delete this from the Custom CSS:

.slicknav_menu  .slicknav_menutxt {
	font-weight: 600;	
}

The top style there is for the body. The default weight is 400, so if we add 300 there it should change that for elements that aren’t otherwise specified.

If you run into any questions or trouble, let me know.

Have a great weekend,
Bill

[Paul Cato]

Thanks Bill, that gives me easier control.
Paul

[Bill Robbins]

Happy to help out Paul 🙂

[Author]

Posts