Change font weight from 400 to 300

Support Area Forums Elite Change font weight from 400 to 300

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://digitalprint.paulcato.com/home/
  • Author
    Posts
  • #36360

    Paul Cato
    Participant

    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

    #36371

    Bill Robbins
    Moderator

    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

    #36374

    Paul Cato
    Participant

    Thanks Bill, that gives me easier control.
    Paul

    #36375

    Bill Robbins
    Moderator

    Happy to help out Paul 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Change font weight from 400 to 300’ is closed to new replies.