Add google web fonts in WordPress the right way

 In Functions, WordPress Theme Development

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 in 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.

// add google web fonts in wordpress the right way
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 fell free to share and comment 🙂 . Do you have a code snippet and you want to see it publish on my site ? I will be more than happy to do it please send me a message (here)

Recent Posts

Leave a Comment

Start typing and press Enter to search