Remove Open Sans and Use Your Favorite Google Font in WP-Forge

remove-open-sans

remove open sansRemove open sans – How can I do this? I’ve been asked this question a lot and I wanted to post this for a while now, but as always, life gets in the way. If you’re interested in getting to the nuts and bolts I posted how to do this in the support forums. For this snippet I will be using the same elements that I used there.

First things first

One of the first things you need to do before you remove open sans is make sure you are using a child theme . You can use your own child theme or you can use WP-Starter, a WordPress child theme I built for use with WP-Forge.

You can add the code to WP-Forge, however when I update WP-Forge, you will lose the code. You’d have to do it all over again.

Remove Open Sans – Let’s Remove Some Action

Open Sans is added with the following function in functions.php starting on line 149:

if ( ! function_exists( 'wpforge_google_fonts' ) ) {
    function wpforge_google_fonts() {
        // register the font styles we want
        wp_enqueue_style('wpforge-opensans', '//fonts.googleapis.com/css?family=Open+Sans:300,700','', '6.2');
    }
    add_action( 'wp_enqueue_scripts', 'wpforge_google_fonts', 0);
}

We basically have to “turn it off” and “turn on” our own. The way we do is by using the “remove_action” function built into WordPress. So let’s go ahead and turn it off shall we. Add the following to your functions.php:

function remove_open_sans() {
    remove_action( 'wp_enqueue_scripts', 'wpforge_google_fonts', 0);
}
add_action( 'after_setup_theme', 'remove_open_sans', 9 );

This “turns off” the Open Sans.

Time to Add Your Font

Now that you know how to remove Open Sans from the theme let’s go ahead and add the font or fonts you want to use. Add the following to your functions.php:

if ( ! function_exists( 'my_theme_fonts' ) ) {
    function my_theme_fonts() {
        // register the font styles we want
        wp_enqueue_style('Oswald', '//fonts.googleapis.com/css?family=Oswald');
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_fonts', 0);
}

As you can see I added the Oswald font. You can use whatever font you want from Google and you can also add multiple fonts. If you want to add multiple fonts you can use the same function, just separate the fonts like so:

if ( ! function_exists( 'my_theme_fonts' ) ) {
    function my_theme_fonts() {
        // register the font styles we want
        wp_enqueue_style('Oswald', '//fonts.googleapis.com/css?family=Oswald');
            wp_enqueue_style('Roboto', '//fonts.googleapis.com/css?family=Roboto');
            wp_enqueue_style('Ubuntu', '//fonts.googleapis.com/css?family=Ubuntu');
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_fonts', 0);
}

Post Update

A quick update to this tutorial using the method mentioned by @Henk Barreveld in the comments.

All a user has to do is copy and paste the original function into their child theme functions.php and it will overwrite the original function:

if ( ! function_exists( 'wpforge_google_fonts' ) ) {
    function wpforge_google_fonts() {
        // register the font styles we want
        wp_enqueue_style('wpforge-opensans', '//fonts.googleapis.com/css?family=Open+Sans:300,700','', '6.2');
    }
    add_action( 'wp_enqueue_scripts', 'wpforge_google_fonts', 0);
}

Just change the font to the new one you want:

if ( ! function_exists( 'wpforge_google_fonts' ) ) {
    function wpforge_google_fonts() {
        // register the font styles we want
        wp_enqueue_style('Oswald', '//fonts.googleapis.com/css?family=Oswald','', '6.2');
    }
    add_action( 'wp_enqueue_scripts', 'wpforge_google_fonts', 0);
}

You can even add more fonts if you wish:

if ( ! function_exists( 'wpforge_google_fonts' ) ) {
    function wpforge_google_fonts() {
        // register the font styles we want
        wp_enqueue_style('Oswald', '//fonts.googleapis.com/css?family=Oswald');
            wp_enqueue_style('Roboto', '//fonts.googleapis.com/css?family=Roboto');
            wp_enqueue_style('Ubuntu', '//fonts.googleapis.com/css?family=Ubuntu');
    }
    add_action( 'wp_enqueue_scripts', 'wpforge_google_fonts', 0);
}

So there it is, you can remove Open Sans and add your own fonts. I hope you found this tutorial useful.

3 thoughts on “Remove Open Sans and Use Your Favorite Google Font in WP-Forge

  1. Hi Thomas,

    Thank you! I recently started with WP-Forge because for certain reasons I wanted to move away from using node.js and Gulp, but I still like Foundation.

    One of the things I had to do was just what you address here: use different fonts, not Open Sans. However, I did it slightly differently and I would appreciate your view on this.

    The function definition in the WP-Forge functions.php file starts with “if ( ! function_exists( ‘wpforge_google_fonts’ ) ) {…”. This is good WordPress practice and I always understood it is to allow you to define your own function with the same name in your child theme, which will then be used instead of the function with that name in the parent theme.

    Unless I misunderstand this, it is even in the codex: https://codex.wordpress.org/Child_Themes#Using_functions.php

    So that is what I did and it works without a problem. Do you see any (potential) problem with this?

    Best regards,
    Henk Barreveld

    • Hi Henk,

      You are very welcome. And you are correct, what you did is another way the tutorial above can be accomplished. This is also why I wrapped all the functions in WP-Forge in the conditional statements, to make it easy for those well versed in modifying themes.

      I did the tutorial the way I did because I didn’t want anyone not accustomed to doing something like this get confused by giving them more than one option. Thanks for bringing it up. Now if anyone is interested they can do it the way you did by using the same function. Nice work 😉

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.