Add google web fonts in WordPress the right way

Google has been supplying the community with a large collection of web-based fonts for quite a few years. There are several ways Google allow you to use these fonts for free on your website. Google also provides instructions for embedding and using these fonts on your website which works great for static HTML websites but fail on WordPress based websites. Simply adding Google Web Fonts in theme header is not recommended by WordPress developers. So today I’m going to show you the right way to add Google web fonts in your WordPress site.

Of course, there are lots of plugins available to add Google web fonts on your website, but this little task definitely falls into the “you absolutely do not need to use a plugin for this” category. After all, you want to keep your site lean and mean. And also if you’re developing a theme, chances are you’d like your typography choices to be tied to your theme, not dependent on a plugin. So we’re going to use the wp_enqueue_scripts action hook to embed Google web fonts in our site.

Simply paste this following WordPress Snippet in your theme’s functions.php file. This code snippet will add ‘Open Sans’ and ‘Droid Sans’ fonts in your website header. But before pasting, you will need to change fonts in this following code.

 

function ns_enqueue_google_fonts() {
    if ( !is_admin() ) :
        global $wp_styles;
        wp_register_style( 'GoogleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans', false, NULL, 'all' );
        wp_enqueue_style( 'GoogleFonts' );
    endif;
}
add_action( 'wp_enqueue_scripts', 'ns_enqueue_google_fonts' );

Thank you for seeing my tutorial and feel free to share and comment :). Do you have a code snippet and you want to see it published on my site? I will be more than happy to do it please send me a message (here)

ABOUT AUTHOR

Nuno

I am a Freelance Web Developer and WordPress Expert based in London with a wealth of website development and support experience. I am great at problem solving and developing quick solutions.

LEAVE A COMMENT

Your email address will not be published. Required fields are marked *

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

  • LET'S TALK!

    Fill in the form below to make an enquiry or find my contact details on my contact page.