Need help? Check out our Support site, then


Font weight for content in Illustratr

  1. Hello. I'm having trouble adjusting the font weight of the body text on my website. Using the CSS, I will make a change to "font-weight" in either the .entry-content or .body selectors. The change will appear on screen and I will save the CSS, but when I next view the website the text has reverted to the default font weight.

    I have tried clearing the cache and using a different browser but neither made any difference. I have also tried specifying the "font-family" as "Source Sans Pro Light" but that doesn't work either. Any advice?

    The theme I'm using is Illustratr and my website is http://www.artfulwords.com.au.

    Many thanks for your help.

    The blog I need help with is artfulwords.com.au.

  2. Try adding this to your custom css

    body
    {font-weight: bold}

  3. Thanks for your response, Eric. I should have said I'm trying to make the text weight lighter rather than bolder. I tried adding your suggested code using "lighter" instead of "bold" but the same problem recurred. The font weight would change while the CSS panel was open but when I next visited the site, it had reverted to normal.

    Is there anything else I could try?

    Many thanks.

  4. Hi there, the font you are using for the body text, Source Sans Pro Regular has a fairly broad stroke and for body text with Source Sands Pro, you cannot select a different weight at Appearance > Customize > Fonts. Since the font, and the weight settings come from Typekit, there isn't a way to override and get a lighter stroke for body.

    I would suggest looking back over the fonts and find another that looks similar and has a lighter stroke.

  5. Thanks for this, thesacredpath.

    I still don't understand why the font weight appears lighter (the way I prefer it) when the CSS panel is open but not when I have saved and closed it. If Typekit does not allow a lighter font weight for Source Sans Pro, why can I see it looking that way in the CSS panel view but not in a browser window?

  6. @caitilin, as I remember, in the customizer preview, that view is being created by WordPress customization and then the result sent to the browser, which is why we can show the changes you make in realtime rather than requiring a refresh of the page. When you are viewing your site directly in a browser window, it is the browser that is doing all the rendering.

    I've pinged our developers on this to confirm and to have a look at your site as an example since the difference in your case seems a little bit too much of a difference.

    I'll post back here as soon as I hear back from the developers on this.

  7. Many thanks, thesacredpath.

  8. Hi, and sorry it took so long to get back to you, but I have filed a bug report on this. I'll post back here once it has been reviewed by the team.

  9. Thank you for this, thesacredpath.

    I know this is quite a small thing but it does make a difference, so I appreciate you investigating it for me. I find it strange - and frustrating - that it is possible to change the font style for headings but not body text, even when the same font is used for both. Surely if it works for one it could also work for the other?

    Thanks again for your efforts.

  10. You are welcome. Although there are some minor rendering differences on some themes, we try to keep things as "WYSIWYG" as we can, and in Illustratr, the difference is too big to ignore.

    Many thanks for bringing this to our attention.

  11. Hello again.

    Any progress on the font weight issue in Illustratr discussed above? I am still able to see the lighter font weight in the customizer preview but not in any web browser I have tried.

    Thanks.

  12. @caitilin, sorry for the delay. I had not gotten a notification on the bug report resolution. When I look at your site (services page) in the latest version of Firefox, Chrome and Safari, this is what I see when comparing the actual site page (left) with the Customizer view (right). To me they are substantially the same now. There was an error in the customizer display where it was applying the following CSS to the font when it shouldn't have.

    .entry-content {
        font-weight: 300;
    }

    With Typekit fonts, you can apply a heavier font weight through CSS, but you cannot apply a lighter font weight, and 300 is lighter than Source Sans Pro Regular.

    We can try a little trickery though if you would like.

    1. Go to Appearance > Customize > Fonts and change your heading font weight from "regular" to "light" and save the change.
    2. Go to Appearance > Customize > CSS and change this rule

    .entry-content {
    	font-weight: 300;
    	font-size: .85em;
    }

    to this

    .wf-active body {
    	font-weight: 300;
    	font-size: .85em;
    }

    3. Add the following rule to make the heading font 400 weight (remember we can make them heavier, but not lighter), which is the weight for "regular".

    .wf-active h1, .wf-active h2:not(.site-description), .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6 {
        font-weight: 400;
    }

    Save the changes, clear your browser cache and then take a look at your site and see what you think.

  13. Thanks for your response, @thesacredpath. I appreciate your assistance.

    The suggested CSS tweak didn't achieve what I was looking for, but that's ok. I didn't realise the fonts could be made heavier but not lighter.

    I like everything else about the Illustratr theme so I'll stick with it as it is for now.

    Thanks again for all your help.

  14. You are welcome and do let us know if you have additional questions or problems.

You must log in to post.

About this Topic