• Resolved Katsofa

    (@katsofa)


    Hi everyone,
    I would like to change the font in my founder child theme.
    What’s the best, or founder-specific way, to do it? Do I have to work with @font-face import or can I just upload the font file to my child theme and edit the stylesheet accordingly?
    Thanks so much!
    Kathrin

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Kathrin,

    Thanks for choosing Founder!

    If you’re comfortable working with a bit of PHP, check out the way Founder loads the Noto Sans font on line 6 of the script.php file (founder/inc/script.php). You can copy this same method in your child theme to load any font from Google Fonts. Then the site can be styled with the font like this:

    body,
    input,
    textarea {
      font-family: "My New Font", sans-serif !important;
    }

    If you’re font isn’t on Google Fonts, you can package the font files with your child theme and import them with @font-face, or take advantage of the Use Any Font plugin. It’s really handy for generating and loading the various font files needed for cross-browser support.

    Lastly, if you want to skip the technical stuff altogether, the Easy Google Fonts plugin and Founder Pro both have simple methods for selecting new fonts.

    Hope that helps! I’ll be happy to elaborate on any point – just let me know.

    Thread Starter Katsofa

    (@katsofa)

    Hi Ben,

    thank you very much for your fast reply! I do not know anything about php, but might give it a try. So to make sure:

    I copy the script.php to my child theme and exchange only this bit:

    wp_register_style( ‘ct-founder-google-fonts’, ‘//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic’);

    to (new font Lato – loved that in poet theme):

    wp_register_style( ‘ct-founder-google-fonts’, ‘//fonts.googleapis.com/css?family=Lato:400,700,400italic’);

    Is this correct? (Plus the styling in the CSS, of course.)
    Thanks, Kathrin

    Theme Author Ben Sibley

    (@bensibley)

    Lato is a great font ??

    You can use this function to load Lato on the site:

    function ct_founder_child_load_google_font() {
      wp_enqueue_style( 'ct-founder-child-google-fonts', '//fonts.googleapis.com/css?family=Lato:400,700,400italic');
    }
    add_action( 'wp_enqueue_scripts', 'ct_founder_child_load_google_font' );

    That snippet can be copied and pasted into the child theme’s functions.php file, and it should start loading the font right away. You don’t need to copy anything else over. The only other step will be to add the CSS.

    If your child theme doesn’t have a functions.php file, you can create an empty file and just name it functions.php, or click here to download a sample founder child theme with a functions.php file.

    Thread Starter Katsofa

    (@katsofa)

    Hi Ben,
    you’re a star! That was great help! I even managed to enqueue a second font for the headings – sweet! Will let you know once I’m online.
    Cheers, Kathrin

    Theme Author Ben Sibley

    (@bensibley)

    Awesome, I’m happy to help ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘customize font child theme’ is closed to new replies.