Help w/ Post & Page Header Font Customization

  • Unknown's avatar
    komoraybi · Member ·

    Hello,

    I have perused a bunch of discussions about customizing the font for post/page headers without altering the font of the site title, but none of those suggestions seem to be working for me.

    My site is using the Hemingway Rewritten theme.

    What I would like to do is change the font of the Post and Page headers from the default font (Raleway) to FF Market. If I just change the Heading Font of the entire site to FF Market, it shows up fine, but this also changes the Site Title and Tag, which I want to leave as Raleway.

    These are the only other custom codes I have added to the CSS sheet in the Customization tool (in case you think maybe interference from these is the problem?):
    #content {
    font-size: 14px;
    }

    .site-branding {
    display: inline-block;
    box-shadow: 0 15px 10px rgba(0,0,0,0.7);
    }

    Thanks in advance for your help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, what you can do is change the font to FF Market at Appearance > Customize > Fonts and then change the site title back to what it was originally with the following CSS.

    .site-title, .site-description {
font-family: "Raleway", sans-serif !important;
}
.site-title {
font-size: 3rem !important;
}
.site-description {
font-size: 1.8rem !important;
}
  • Unknown's avatar
    komoraybi · Member ·

    Ah, that makes a lot of sense. Thank you so much for your help!

    Question just for my own education: is “!important;” added as a command to override the prevailing CSS code? I noticed that when I added font-weight: bold to .site-title, it didn’t take effect until I added “!important;” after “bold”.

    Thanks, again!

  • Unknown's avatar
    thesacredpath · Member ·

    When using custom fonts, different selectors are used by the system. .site-title becomes .wf-active .site-title. Normally you would make adjustments using .wf-active .site-title, which would not need the !important attribute, but in cases like this I typically use the original selector so that the adjustments will still remain if custom fonts are deactivated later, and to do that requires the !important attribute so the original selector will override the custom font selector.

  • The topic ‘Help w/ Post & Page Header Font Customization’ is closed to new replies.