Display Settings: Incomplete font settings?

  • TommyNation

    #6424

    Just upgraded my theme to the latest version after a long delay, and tried to change the fonts using the Display settings panel, but found that there’s a few settings missing here.

    I wanted to change all the fonts in the theme, but that wouldn’t work using that setting.

    First issue was that because headlines are A tagged, the setting for title font doesn’t apply to headlines on the front page.

    I could set the main font for normal text though. I set it to "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif with font-size 15px.

    I worked around the issues using the custom CSS box, but I hope that there’s a better way 🙂

    Here’s the CSS code I used:

    img {border:none !important;}

    h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a {
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
    }

    h1, h1 a, h2, h2 a {
    font-size: 40px !important;
    line-height: 44px !important;
    font-weight: normal !important;
    }

    h3, h3 a { font-size: 28px !important; line-height: 33px !important;}
    h4, h4 a { font-size: 24px !important; line-height: 27px !important; font-weight: bold !important;}

    Check out my website TommyNation.com if you want to see how it looks with this custom CSS.

    I personally think they look like good replacement fonts. (Ignore any weird formatting on older articles please.)

    Prasanna SP

    #34310

    Moved to Support.

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard.

    TommyNation

    #34311

    Thanks Prasanna, I will remember that for next time 🙂

    Mod

    Kenneth John Odle

    #34312
    Quote:
    First issue was that because headlines are A tagged, the setting for title font doesn’t apply to headlines on the front page.

    Try:

    .post-title, .post-title a {stuff;}

    Quote:
    I personally think they look like good replacement fonts.

    Did you add these fonts to the Google Fonts option in Graphene? Else, anyone without these fonts installed won’t see them.

    TommyNation

    #34313

    Thanks! That works 🙂

    I did add the Yanone Kaffeesatz font, but didn’t think about Segoe UI.

    Now I found Open Sans, which is almost identical, so I put it in there now as an alternative.

    Google webfonts box now contains:

    Yanone+Kaffeesatz:400,700:latin
    Open+Sans:400,700:latin

    And the font for normal/standard text is set to:

    'Segoe UI', 'Open Sans', 'Lucida Grande', 'Helvetica Neue', sans-serif

    I tweaked the CSS to make the font change on the complete site as well as I could, but I am sure it could be simplified a lot more:

    img {border:none !important;}

    h1, h2, h3, h4, h5, h6 {
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
    font-weight: normal !important;
    }

    h1 { font-size: 36px !important; line-height: 40px !important;}
    h2 { font-size: 32px !important; line-height: 35px !important;}
    h3 { font-size: 28px !important; line-height: 33px !important;}
    h4 { font-size: 24px !important; line-height: 27px !important;}
    h5 { font-size: 20px !important; line-height: 22px !important;}
    h6 { font-size: 16px !important; line-height: 17px !important;}

    .post-title, .post-title a {
    font-family: 'Yanone Kaffeesatz', sans-serif !important;
    font-size: 40px !important;
    line-height: 44px !important;
    }
    .sidebar-wrap h3 {
    font-size: 24px !important; line-height: 24px !important; font-weight:bold !important;text-align:center !important;
    }
    .default_searchform, input, button, form, .comment-link, .comments-link, .previous, .next-post, .previous a, .next-post a, #footer, .post-meta, #header-menu-wrap, #header-menu-wrap li, .wp-caption-text {
    font-family: 'Segoe UI', 'Open Sans', 'Lucida Grande', 'Helvetica Neue', sans-serif !important;
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.