Import Google Fonts with google('googlefonts')


Description: Import Google fonts family and font styles to your website.


    <!doctype html>
    <html lang="en">
      <meta charset="utf-8">
      <title>googlefonts demo</title>
      <script src=""></script>
   "googlefonts", { family:"Tangerine|Inconsolata|Droid Sans" });
   "googlefonts", { family:"Tangerine:bold|Inconsolata:italic", effects:"shadow-multiple|3d-float" });
        <style type="text/css">
            .tangerine { font-family: "Tangerine", arial, sans-serif; font-size:40px }
            .inconsolata {font-family: "Inconsolata", arial, sans-serif; font-size:30px; }
            .droid {font-family: "Droid Sans", arial, sans-serif; font-size:30px; }
            .tangerine_bold { font-family: "Tangerine", arial, sans-serif; font-weight:bold; font-size:40px }
            .inconsolata_italic {font-family: "Inconsolata", arial, sans-serif; font-size:30px; font-style:italic }
        <strong>» Simple</strong>
        <span class="tangerine">Tangerine</span><br /><br />
        <span class="inconsolata">Inconsolata</span><br /><br />
        <span class="droid">Droid Sans</span>
        <br /><br />
        <strong>» Font styles</strong>
        <span class="tangerine_bold">Tangerine Bold</span><br /><br />
        <span class="inconsolata_italic">Inconsolata Italic</span>
        <br /><br />
        <strong>» Font effects</strong>
        <span class="inconsolata font-effect-shadow-multiple">Inconsolata Effect</span><br /><br />
        <span class="droid font-effect-3d-float">Inconsolata Effect</span>


» Simple


Droid Sans
» Font styles
Tangerine Bold

Inconsolata Italic
» Font effects
Inconsolata Effect

Inconsolata Effect
  • Usage

    • Simple use:

      Font family specified will need to be separated using a pipe ( | ), the same way specified when using the Google font link tag.'googlefonts', { family:"Tangerine|Inconsolata|Droid Sans" });

    • Using font styles with the font:

      To use font family styles you will need to add a colon after the font family and specify the style eg.( font-family : font-style ).'googlefonts', { family:"Tangerine:bold|Inconsolata:italic" });

    • Using text effects with fonts:

      To use font effects you will need to specify effects using a pipe ( | ) as separator eg.( effect|effect ).'googlefonts', { family:"Tangerine", effects:"shadow-multiple|3d-float" });

      NOTE:This is still currently in Beta stages

  • Options

    • family:
      family: "Tangerine|Inconsolata|Droid Sans" // Specify fonts to load on the page separated using a pipe ( | ).
    • family styles:
      family: "Tangerine:bold|Inconsolata:italic" // Specify font family style. Add a colon after the font family eg. Tangerine:bold
    • effects:
      effects: "shadow-multiple|3d-float" // Specify font effects you want to load on the page separated using a pipe ( | ).
  • Returns

    • Returns: No return type

      This method does not need to return any type.