Import Google Fonts with google('googlefonts')

.google('googlefonts')


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


Example:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>googlefonts demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
      
        <script>
            
        bitsyCode.ready(function(){
             bitsyCode.google("googlefonts", { family:"Tangerine|Inconsolata|Droid Sans" });
             bitsyCode.google("googlefonts", { family:"Tangerine:bold|Inconsolata:italic", effects:"shadow-multiple|3d-float" });
        })
            
        </script>      
      
        <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 }
        </style>
      
      
    </head>
    <body>
        
        <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>
     
    </body>
    </html>

Preview:



» Simple
Tangerine


Inconsolata


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.

      bitsyCode.google('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 ).

      bitsyCode.google('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 ).

      bitsyCode.google('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.

Share