Google web fonts directory provides hundreds of different styles of fonts to use in your projects. Highlighting important content with different fonts allow users and search engines to scan your content very quickly. You can use different fonts for blockquotes, headings,paragraphs etc… Lets learn how we can simply use google fonts style our content. Go to google font directory at

 

 

Once you go into the google fonts page you will see a list of available fonts as shown above. Click the arrow icon to popup the details about the font. There you can find sample txt, how to use it and page load time as shown in screen below.

 

 

Go to section 3 where you can find the required code to include the font. Use the following code in your website header to make use of wonderful google fonts list.

 

You can use this method to include any font for any tag in your HTML document.

 

 

I have created 2 types of plugins to use google fonts. First one will use inline styles and next one includes styles for all elements separately. Lets start coding now.

 

Plugin File

 

(function( $ ) {
  $.fn.google_fonts = function(options) {
        var defaults = {
        fontname: "arial"
    }; 

    var options = jQuery.extend(defaults, options);

    var fontname = options.fontname;
    fontname = fontname.replace(/ /gi, "+"); 

    $("head").append('');

    jQuery(this).css("font-family",options.fontname);

    return this;

  };
})( jQuery );

 

Using the Plugin

 

 Google Font Inline Plugin
 InnovativePHP Google Font Jquery Plugin
Google Web Fonts Demo
Testing the plugin

 

• First we include jquery and the plugin file in the HTML head section.
• Next we call the plugin using $(element).google_fonts({fontname: “Butcherman”}); synatx. Here you can plae any font name received from google font directory and also You can pass any number of elements such as tags,classes,ids.
• In my example i have used 2 classes called tester1 and tester2, span tag and an element with the Id of test. You can pass any number of elements which you want this font to be used in.
• Once you call the plugin, fontname is taken through options variable and the required css file for the font will be included from google font directory.
• Then we assign the font name to the element using jquery css function.
• It’s important to note that plugin will generate inline styles for each element. This is not the most optimized way to use styles. But it can be used in simple requirements where you don’t have complex structures.
• If you want to use more than one font, include $(element).google_fonts({fontname: “Butcherman”}); line multiple lines and change the font names.
• Make sure you copy the exact font name from Google Web Fonts directory.

 

 

Plugin File

 

(function($) {
    $.innovative_google_fonts = {
       defaults:{
            fontname: "arial"
        },
        init:function(options) {
            var options = $.extend($.innovative_google_fonts.defaults, options);

            var fontname = options.fontname;
            fontname = fontname.replace(/ /gi, "+"); 

            $("head").append("");
            $("head").append("

");

            var elements = options.elements;
            var font_styles = elements +"{ font-family : '"+ options.fontname + "';}";
            console.log(font_styles);

            $("#innovative_google_fonts").append(font_styles);

        }
    };
})(jQuery);

 

Using the Plugin

 

 Google Font Inline Plugin
 InnovativePHP Google Font Jquery Plugin
Google Web Fonts Demo
Testing the plugin

 

• This works as same way as the previous plugin. Only difference it that you pass the elements to the plugin function without calling plugin on elements.
• Use $.innovative_google_fonts.init({fontname: “Sarina” , “elements” : “.tester1,.tester2,span,#test”}); and pass as many elements as you want to the elements variable.
• This will generate a common styles inside a predefined style tag in the head section. This method is better than the previous one since styles are not given inline and hence its is easier to modify the styles.