[Resolved] Changing Fonts via Custom CSS

This topic contains 33 replies, has 5 voices, and was last updated by  Andrew Misplon 1 year, 4 months ago.

Tagged: 

  • Author
    Posts
  • #3374

    Matt Turk
    Participant

    Hi!

    I was hoping you could help me understand how to change the fonts used in the theme currently.
    I understand I need to do this via Appearance > Custom CSS
    I don’t know code and would love your help.
    I would love to use Good Dog (for display text) and Roboto Medium and Regular for Body Copy.

    Thanks in advance!

    Matt

    #3375

    Andrew Misplon
    Keymaster

    Hi Matt

    Thanks for reaching out.

    Ultra Premium offers font settings in the Customizer at Appearance > Customize > Theme Design. If you’d like to stick with Ultra Free you can head over to Appearance > Custom CSS and insert the following:

    /* Body Font */
    #primary label, #primary button, #primary input, #primary select, #primary textarea, #primary p, #primary > ul, #primary > ol, #primary > table, #primary > dl, #primary address, #primary pre, .paging-navigation, .page-links, .site-main .comment-navigation, .site-main .post-navigation, #secondary label, #secondary button, #secondary input, #secondary select, #secondary textarea, #secondary p, #secondary > ul, #secondary > ol, #secondary > table, #secondary > dl, #secondary address, #secondary pre {
    	font-family: 'Roboto', sans-serif;
    	font-weight: 400;
    }

    Good Dog doesn’t look to be a Google Hosted font. This means you’d need to use a site like Font Squirrel to create a usable web font and then store those files on your server somewhere other than the theme folder. Do you have those files ready? If you’re not totally set on Good Dog then it’s a lot easier to choose a font from Google’s offering.

    #3376

    Matt Turk
    Participant

    Hi Andrew

    Thanks so much for your help!
    RE: Roboto – I will try that.

    RE: Good Dog. I’m not adverse to using Gochi Hand instead – and that is a google font.
    Are you able to help me with that CSS for that?

    Thanks again!

    M

    #3377

    Andrew Misplon
    Keymaster

    For sure 🙂 Earlier you said you wanted to use Good Dog for display text. Can you let me know which text that is? Thanks.

    #3388

    Matt Turk
    Participant
    This reply has been marked as private.
    #3391

    Andrew Misplon
    Keymaster

    Sure 🙂 For that you’d add to Custom CSS:

    /* Headings */
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
    	font-family: 'Gochi Hand', cursive;
    }

    Then, right at the top of our Custom CSS, above everything else, insert the following:

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
    @import url(https://fonts.googleapis.com/css?family=Gochi+Hand);

    Let me know how that goes 🙂

    #3392

    Matt Turk
    Participant

    Andrew! you are a champion. Thanks mate.
    Am I pushing the friendship if I ask…how do I get the nav text to change to Roboto and be all caps?
    They are retaining the original theme fonts for some reason?
    M

    #3393

    Andrew Misplon
    Keymaster

    For sure, no problem. That requires a little extra CSS. Let’s try:

    /* Main Menu */
    .main-navigation {
        font-family: 'Roboto',sans-serif;
        text-transform: uppercase;
    }

    Let me know how that goes.

    #3394

    Matt Turk
    Participant
    This reply has been marked as private.
    #3395

    Andrew Misplon
    Keymaster

    Super 🙂 Glad to hear that helped. If anything further comes up, please, let me know.

    #3396

    Matt Turk
    Participant
    This reply has been marked as private.
    #3398

    Andrew Misplon
    Keymaster

    Sure 🙂 Please, try:

    /* Footer */
    .site-footer {
      font-family: 'Roboto', sans-serif;
    }
    #3470

    Tricia
    Participant

    Hi Andrew,

    Could you help me change the title font in the Site Origin Hero widget? Is there something I need to do in the custom CSS? I’m trying to use Montserrat 700.

    Thanks,
    Tricia

    #3477

    Tricia
    Participant

    Hi Andrew,

    You can probably ignore my previous post as it’s more specific than my overall question. I’m wondering how fonts work overall for this theme. I have two more specific areas that I’m curious about:

    1. I’d like to customize more of the fonts on the static homepage, using the SiteOrigin Widgets Bundle to build this page. Can I customize those fonts using “Attributes” within each of these widgets? Do I need to find the corresponding code in the CSS style sheet and customize it in my CSS stylesheet?

    2. I’d like to use two Typekit fonts (Museo and Proxima). I’ve added the Typekits for WordPress plug-in, but I’m not sure how that works alongside the SiteOrigin Widgets Bundle and the Ultra Premium Theme. Can you offer some insight here?

    Thanks for your help.

    #3478

    Andrew Misplon
    Keymaster

    Hi Tricia

    Sorry for missing your previous post. A quick reminder that I send out all the time, please, don’t edit your theme’s style.css file. All themes overwrite their entire folder during theme updates so any changes made here will be lost if we release a theme update and you run that update. Rather use a plugin like Simple Custom CSS.

    Ultra Premium has font settings in the Customizer at Appearance > Customize > Theme Design, the font settings are provided in each section of Theme Design.

    1. Sure, please, let me know which widgets you’re using and what you’d like to change the fonts to and I’ll take a look at the best way to proceed.

    For the Hero widget, scroll down to the Design and Layout section, see the Heading Font setting, change it from Use Theme Font to the font of your choice, that is a Google Font list. As long as your content in the Hero is using h tags like h1, h2, h3 etc, the font setting will work.

    2. Unless a SiteOrigin widget has its own font family settings it’ll be using Ultra’s font settings. Add to those all depends on the cascading nature of CSS, if we add new font styles after the existing styles then they’ll be used OR we can just be more specific with our addon CSS rules. Summary: we can tell the theme what fonts to use over and above the provided settings in the premium Customizer.

    How do you want your new custom fonts to be applied? To headings, to the body font etc. Once we know that I’ll send you the Custom CSS to add to Settings > TypeKit Fonts > Custom CSS Rules.

Viewing 15 posts - 1 through 15 (of 34 total)

You must be logged in to reply to this topic.

Scroll to top