Font weight for content in Illustratr

  • Author
    Posts
  • #1995990

    caitilin
    Member

    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.

    #1996153

    ericnoden
    Member

    Try adding this to your custom css

    body
    {font-weight: bold}

    #1996422

    caitilin
    Member

    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.

    #1996467

    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.

    #1996736

    caitilin
    Member

    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?

    #1996738

    @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.

    #1996740

    caitilin
    Member

    Many thanks, thesacredpath.

    #1997180

    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.

    #1997181

    caitilin
    Member

    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.

    #1997182

    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.

    #1997319

    caitilin
    Member

    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.

    #1997320

    @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.

    #1997321

    caitilin
    Member

    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.

    #1997322

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

The topic ‘Font weight for content in Illustratr’ is closed to new replies.