Would like to change the font style in the header

Home Forums Premium WordPress Themes Seasonal Pro Would like to change the font style in the header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2423
    Roy Kamimura
    Participant

    I would like to change the default font on the header but so far no luck. I’ve tried both Easy Google Font (which is great) and Styleguide- Custom fonts and colours plugins but wasn’t able to change the font style. I’m CSS-illiterate so don’t want to touch the stylesheets. Any suggestions?

    Thanks,
    Roy

    #2425
    Shaped Pixels
    Keymaster

    By default, the theme is loading the Google Font Playfair Display and it’s styled this way:

    [code].site-title {
    margin: 0;
    font-family: “Playfair Display”,Georgia;
    font-weight: 400;
    font-size: 3rem;
    font-style: italic;
    color: #fff;
    line-height: 1;
    }[/code]

    So with your font being loaded, you would apply the font family like this:

    [code].site-title {
    font-family: your font here;
    }[/code]

    Was this what you were looking to change? I’m assuming you still want to use one of your font plugins like Easy Google Fonts? Also, not to worry, I will help you through with this if you’re still stuck on it.

    What font were you wanting to use?

    #2426
    Roy Kamimura
    Participant

    I would like to display Arial or something similar to that but am completely lost as to which file I should modify. I have Seasonal Pro so I’m assuming it would be in the Child theme. Will these changes stay if the theme gets upgraded?

    Roy

    #2427
    Shaped Pixels
    Keymaster

    Because you want to use Arial, this makes it a lot easier because people on Windows or MAC’s will be able to see it without you needing to include that font. Now to help you change the font, here is something to think about…if you think you might be making ONLY CSS changes and not theme file code such as HTML, PHP etc, then I have a very easy solution for you. But if you plan to modify layout, theme file coding, etc., then a child theme will be needed.

    Do you think you will only be making CSS changes such as font type?

    #2428
    Roy Kamimura
    Participant

    At this point I’m guessing only CSS changes. Ideally, I just want all the fonts menus, headers, text to be Arial (yeah, it’s boring but I’m shooting for consistency). I just installed the simple custom css plugin and I saw a few posts on modifying the files (https://www.shapedpixels.com/setup-seasonal-pro/typography-management-in-seasonal-pro) – am just paranoid that I don’t have the complete syntax.

    #2429
    Shaped Pixels
    Keymaster

    For this, you can use the plugin called Simple Custom CSS which you just installed. This lets you create your own stylesheet without touching the theme stylesheet, therefore, allowing you to get updates without losing anything.

    Changing the font for a particular element gets a little easier now. Let’s start with the Site Title. For this, you will add this to your custom stylesheet:

    [code].site-title {
    font-family: arial, sans-serif;
    }[/code]

    The arial will be used, and if for some reason arial is not available on a visitors computer, then it goes to the next one called sans-serif.

    For your headings, you would do this:

    [code]h1, h2, h3, h4, h5, h6 {
    font-family: arial, sans-serif;
    }[/code]

    For your menu, you would do this:

    [code].primary-navigation li,
    .site-navigation li {
    font-family: arial, sans-serif;
    }[/code]

    For everything else, you can do this:

    [code]body {
    font-family: arial, sans-serif;
    }[/code]

    Now, if you want to get really fancy, you can combine all that into the following, just to save space:

    [code]body,
    .site-title,
    h1, h2, h3, h4, h5. h6,
    .primary-navigation li,
    .site-navigation li {
    font-family: arial, sans-serif;
    }[/code]

    I would recommend bookmarking the w3schools website because of it’s awesome tutorials. For fonts, you can check out this to help you with other attributes for font styling:

    http://www.w3schools.com/css/css_font.asp

    #2430
    Roy Kamimura
    Participant

    This is great! Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.