Google Webfonts

Google webfonts rocks. I had used it in some projects and it worked like a charm. To use Google webfont, basically all you need to do is adding the stylesheet which is hosted in Google servers to your <head> section then edit your layout stylesheet. Example:

1. Add this stylesheet to your <head> section:

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Copse' type='text/css' />

2. Edit your stylesheet

    .entry-title{
    font: 25px Copse, Georgia;
    }

However, in WordPress theme development, adding stylesheet directly into your <head> section is not recommended. It is recommended for you to use wp_enqueue_style() function to load stylesheet to prevent stylesheet duplication. It’s very simple thing to do:

1. Open your functions.php and add these functions

    add_action('wp_head', 'my_google_webfont', 5); // hook my_google_webfont() into wp_head()
    function my_google_webfont(){
    wp_register_style('copse', 'http://fonts.googleapis.com/css?family=Copse:regular', array(), false, 'screen'); // register the stylesheet
    wp_enqueue_style('copse'); // print the stylesheet into page
    }

This code will register copse font, print the stylesheet and hook it into wp_head() section which is placed in <head> section

2. Edit your stylesheet

    .entry-title{
    font: 25px Copse, Georgia;
    }

That’s all. Easy, right? I hope you find this tutorial useful.

2 thoughts on “Using wp_enqueue_style() to load Google Webfonts in WordPress

  1. wew..cool….
    udah baca, dan udah coba..

    thanks fik…
    nice one!

Share Your Thought