Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<article>
    <section>
        <h1>Google-font SCSS Mixin <span>v.2.0</span></h1>


        <p>Google-font is a mixin intended to provide a simple structured way to import google fonts while doing font request optimization under the hood – like combining multiple imports in to one (saving requests).</p>
    </section>
    
    <section>
<fieldset>
    <h2>Try it out (add as external pen resource)</a>
  <label>
    <ol><li>copy link below </li><li>open css settings (gear icon)</li><li>paste in add external css</li></ol>
    <input value="//codepen.io/jakob-e/pen/woGXWe.scss" style="font-size:20px;width:calc(100% - 20px); padding:10px;" onfocus="this.setSelectionRange(0, this.value.length)"/>
  </label>
</fieldset>          
    </section>
    
    <section class="note">
        <h2>Version 2.0 update</h2>
        <p>Due to changes in Sass interpolation older versions will start to throw deprecation warnings – why I found it time to bump the version:</p>
        <p>
        <ul>
            <li>To keep it simple and avoid unexpected overhead multiple font names are no longer allowed in the same include (use combine syntax)</li>
            <li>Subsets argument has been removed and is now a config-only setting ($google-font-subset)</li>
            <li>Flexible argument position has been removed to  simplify code</li>
            <li>Font weight i/italic sufix are now allowed (styles will be ignored if added)</li>        
        </ul>
</section>
<section>
    <h2>Syntax:</h2><code data-ace-theme="tomorrow" data-ace-mode="scss" data-ace-cursor="false">//  Import syntax:
//        
//  $name  :  Font name 
//  $weight:  Font weight 100 - 900 (default: 400)       
//  $style :  Font style normal/italic/oblique (default: normal)               
//  $text  :  Limit request to these characters (quoted string)        
//        
//  @include google-font($name, [$weight, $style, $text]);
//         
@include google-font(Lato, 300);
@include google-font(Open Sans, 400, italic);        

//  CSS output:
@import url("//fonts.googleapis.com/css?family=Lato:300");
@import url("//fonts.googleapis.com/css?family=Open+Sans:400i");       
 
    
//  Conbine syntax:
//  By placing google-font includes inside a google-font include (without arguments)
//  nested includes will be merged into a single import 
@include google-font {   // <= combine
    @include google-font(Material Icons);                                     
    @include google-font(Open Sans, 300 400 700, normal);
    @include google-font(Open Sans, 300 400 700, italic normal);    
    @include google-font(Lato, 300 400i 700i);
    @include google-font(Lato, 300 700, italic normal);    
    @include google-font(Slapo 27px, 400 200, $text: 'Lorem ipsum dolor sit amet');
}
    
//  CSS output:
//  Note! as Slapo 27px is limited to specific characters it will 
//  not be merged with the other imports
@import url("//fonts.googleapis.com/css?family=Slapo+27px:400,200&text=Lorem%20ipsudlta");
@import url("//fonts.googleapis.com/css?family=Material+Icons:400|Open+Sans:300,400,700,300i,400i,700i|Lato:300,400i,700i,700,300i");
</code>
    
    </section>
    <section class="note">
        <h2>Two lesser known features of google fonts</h2>
        <ul>
        <li><a href="https://material.io/icons/" target="_blank">Material Icons</a> can be imported using the name "Material Icons"</li>
        <li><a href="https://developers.google.com/fonts/docs/getting_started#optimizing_your_font_requests_beta" target="_blank">Optimizing font requests</a> using the "text=" value</li>
        </ul>
        
    </section>
    <section>
        <br><br>
        <h2>The Mixin</h2><code data-ace-theme="tomorrow" data-ace-mode="scss" data-ace-cursor="false">// –––––––––––––––––––––––––––––––––––––––––––––––––––––––––
//  Google Fonts  v.2.0.0
// –––––––––––––––––––––––––––––––––––––––––––––––––––––––––
//
//  Subset config 
//    
//  Note! 
//  The Latin subset is always included if available and need not be specified. 
//  Please note that if a client browser supports unicode-range the subset parameter 
//  is ignored; the browser will select from the subsets supported by the font to 
//  get what it needs to render the text.
//  Source: https://developers.google.com/fonts/docs/getting_started
//
$google-font-subsets: (
  'arabic'      : false 
  , 'bengali'     : false 
  , 'cyrillic'    : false 
  , 'cyrillic-ext': false 
  , 'devanagari'  : false 
  , 'greek'       : false 
  , 'greek-ext'   : false 
  , 'gujarati'    : false
  , 'hebrew'      : false 
  , 'khmer'       : false 
  , 'latin'       : false
  , 'latin-ext'   : false 
  , 'tamil'       : false 
  , 'telugu'      : false 
  , 'thai'        : false
  , 'vietnamese'  : false 
) !default;

//  
//   Google Fonts
//
@mixin google-font(
  $name   : null,     //  string (unquoted will work too)
  $weights: 400,      //  list or numeric value (100 200 300 400 ...)
  $styles : normal,   //  list or string (normal and or italic)
  $text   : null      //  string (don\'t forget to unescape )
  ){
    //  base url
    $URL: '//fonts.googleapis.com/css?family=';

    //  create global variables 
    @if not variable-exists(__gf__combine){ $__gf__combine: false !global; }
    @if not variable-exists(__gf__map){ $__gf__map: () !global; }   
    @if not variable-exists(google-font-subsets){ $google-font-subsets: () !global; }   

    //  append italic to weights
    @if index($styles, italic) and not str-index($weights+'',i){
      $wgt: if(index($styles, normal), $weights, ()); 
      @each $weight in $weights { $wgt: append($wgt, $weight + i); }
      $weights: $wgt;
    } 

    //  reduce and encode text
    @if $text {
      $list: __gf__list-unique(__gf__str-explode($text));
      $text:'&text=';
      $encode:('!':'%21','#':'%23','$':'%24','&':'%26','\'':'%27',
               '(':'%28',')':'%29','*':'%2A','+':'%2B',',':'%2C',
               '/':'%2F',':':'%3A',';':'%3B','=':'%3D','?':'%3F',
               '@':'%40','[':'%5B',']':'%5D',' ':'%20');           
      @for $i from 1 through length($list) {
        $char: map-get($encode,nth($list,$i)) or nth($list,$i);
        $text: $text + $char;
      }
    }

    //  subsets from config
    $subset: '';    
    @each $set, $enabled in $google-font-subsets {
      @if $enabled {
        $subset: $subset + if($subset == '', '', ',') + $set;            
      }
    } 
    $subset: if(str-length($subset) > 0 and $subset != latin, '&subset=' + $subset, '');

    @if $name {
      //  replace name whitespaces  
      $name: if(type-of($name) == string, unquote($name),$name);
      $name: __gf__str-replace(inspect($name),' ','+');
      @if $__gf__combine and not $text {
        //  add weights to combine map 
        $wgt: map-get($__gf__map, $name) or ();
        $wgt: __gf__list-unique(join($wgt, $weights, comma));
        $__gf__map: map-merge($__gf__map, ($name: $wgt)) !global;
      } @else {
        //  create query
        $query: '';
        @each $weight in $weights { $query: $query + if($query != '', ',', '') + $weight; }
        $query: __gf__str-replace($query, ' ');
        $query: $name + if(str-length($query) > 0 and $query != '400',  ':'+ $query, '');

        //  create single immport
        @at-root { @import url($URL + $query + if($text, $text, '') + $subset); }
      }
    } @else {
      //  set combine flag
      $__gf__combine: true  !global;

      //  nested includes   
      @content;

      //  convert combine map to query
      //  (remove weights if just 400)
      $query:'';        
      @each $font, $weights in $__gf__map {
        $query: $query + if($query != '', '|', '') + $font + 
                if(length($weights) == 1 and (nth($weights, 1) == '400'), 
                '', ':' + join((), $weights, comma));
      }       

      //  remove query whitespaces 
      $query: __gf__str-replace($query,' ');

      //  create combined immport
      @at-root { @import url($URL + $query + $subset); }

      //  reset combine flag
      $__gf__combine: false !global;
    }
}
// 
//  Helper functions
//
@function __gf__list-unique($list) {
  $result: ();
  @each $item in $list { @if not index($result, $item+''){ $result: append($result, $item+'');} }
  @each $item in $result { $result: set-nth($result, index($result, $item),unquote($item)); }
  @return $result;
}
@function __gf__str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search); 
  @return if($index, 
    str-slice($string, 1, $index - 1) + $replace + 
    __gf__str-replace(str-slice($string, $index + 
    str-length($search)), $search, $replace), 
    $string);
}
@function __gf__str-explode($string){
  $list:(); 
  @for $i from 1 through str-length($string) { $list: append($list, str-slice($string, $i, $i)); } 
  @return $list;
}</code>
    </section>
<article>











<!-- 
<article>
    <h1>Google-font SCSS Mixin <span>v.1.0.3 beta</span></h1>
    <p>Google-font is intended to provide a simple structured way to import google fonts
        while doing font request optimization under the hood.</p>
    <p>Try it out on <a href="//sassmeister.com/gist/b09aabde0528387f495b" target="_blank">SassMeister</a>, fork it on 
        <a href="//github.com/jakob-e/google-font" target="_blank">GitHub</a> or include it on Codepen (v.1.2) *: 
        <input type="text" value="//codepen.io/jakob-e/pen/BNNMjd" />
        <a class="small" href="//blog.codepen.io/documentation/editor/adding-external-resources#other-pens" target="_blank">* Adding external resources on Codepen</a>
    <p>... and please comment if you find a bug – this is a work in progress :-)</p>
    <a href="#sneak-peek" class="note">Get a sneak peek on version 1.2 </a> 
    <p>&nbsp;</p>
    <h2>Multi-use syntax</h2>
    <code data-ace-theme="tomorrow" 
          data-ace-mode="scss" 
          data-ace-cursor="false">// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
//        
//  Import syntax:
//        
//  $name  :  Font name (quoted string)  
//  $weight:  Font weight 100 - 900 (default: 400)       
//  $style :  Font style normal/italic/oblique (default: normal)               
//  $subset:  Font subsets (quoted string or list)       
//  $text  :  Limit request to these fonts (quoted string)        
//        
//  @include google-font($name, [$weight, $style, $subset, $text]);
//         
@include google-font('Lato', 300);
@include google-font('Lato', 400, italic);        

//  CSS output:
//  @import url(//fonts.googleapis.com/css?family=Lato:300);
//  @import url(//fonts.googleapis.com/css?family=Lato:400italic);        
        
        
        
// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
//        
//  Combine syntax:   
//        
//  @include google-font {
//      @include google-font($name, [$weight, $style, $subset, $text]);
//      @include google-font($name, [$weight, $style, $subset, $text]);
//      ...
//  } 
//         
@include google-font {
    @include google-font('Lato', 300);
    @include google-font('Lato', 400);    
    @include google-font('Open Sans', 300);
    @include google-font('Open Sans', 400);
    @include google-font('Open Sans', 800);        
    @include google-font('Open Sans', 300, italic);
    @include google-font('Marck Script', $text:'F');        
}
        
//  CSS output:
//  Note! Marck Script is limited to specific characters why it is  
//        excluded from the combined request.          
//  @import url(//fonts.googleapis.com/css?family=Marck+Script:400&text=F);
//  @import url(//fonts.googleapis.com/css?family=Lato:300,400|Open+Sans:300,400,800,300italic);
        
</code>
<h2>Subsets</h2>
<p>Though it is possible to define subsets in the mixin it is recommended to handle this globally using the $google-font-subset map</p>    
<code data-ace-theme="tomorrow" 
          data-ace-mode="scss" 
          data-ace-cursor="false">// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''        
//
//  Subsets (true = enabled)
//  Note! by default google will deliver a Latin font why you only
//  need to enable it if used in combination with another subset.
//    
$google-font-subsets: (
    'arabic'      :false
  , 'cyrillic'    :false
  , 'cyrillic-ext':false
  , 'devanagari'  :false
  , 'greek'       :false
  , 'greek-ext'   :false
  , 'hebrew'      :false
  , 'khmer'       :false
  , 'latin'       :false  
  , 'latin-ext'   :false
  , 'telugu'      :false
  , 'vietnamese'  :false
);        
    </code>
    <h2>Request optimized font</h2>
    <p>If you only need to style a few letters pass the ones you need using $text. This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%. Google-font will handle encoding and remove redundancies.</p>
    <code data-ace-theme="tomorrow" 
          data-ace-mode="scss" 
          data-ace-cursor="false">// ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
//        
//  Request optimized font
//        
@include google-font('Open Sans', 800, $text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.');  
        
//  CSS output:
//  @import url(//fonts.googleapis.com/css?family=Open+Sans:800&text=Lorem%20ipsudlta%2Ccngbq.Uvx);

        
    </code>
<h2>Dependencies</h2>    
    <p>Google font will work with Ruby Sass 3.3+ (LibSass is on the to-do-list).</p>
    <p>Google font does not require other imports – but as the list helper functions
       are shamelessly ripped from <a href="http://sassylists.com/" target="_blank">SassyLists</a> by <a href="https://codepen.io/HugoGiraudel/">Hugo Giraudel</a>
        it is recommeded you import the original. By importing SassyLists google-font will automatically switch to the real deal.</p>
    <p>&nbsp;</p>
    <h2>The mixin</h2>
    <p>Sorry for the mess</p>
<code data-ace-theme="tomorrow" 
          data-ace-mode="scss" 
          data-ace-cursor="false">// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
//
//  Google Font Mixin – v. 1.0.3 beta
//
// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
//
//  Helper functions by Hugo Giraudel 
//  Shamelessly ripped Sassy List Functions 
//  Go get the real thing: http://sassylists.com/
// 
//  Note! just import sassylists and google-font 
//  will switch to this    
//     
@function str-replace($string, $search, $replace: '') {$index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); }@return $string; }
@function ___gf-list-missing($functions...) {$missing-dependencies: (); @each $function in $functions { @if not function-exists($function) {$missing-dependencies: append($missing-dependencies, $function, comma); } } @return length($missing-dependencies) != 0; }
@function ___gf-list-multival($list) { @return length($list) > 1; }
@function ___gf-list-flatten($list) { @if ___gf-list-missing(___gf-list-multival) == true { @return null; } $result: (); @each $item in $list { @if ___gf-list-multival($item) { $flatten: ___gf-list-flatten($item); @each $i in $flatten { $result: append($result, $i, list-separator($list)); }} @else { $result: append($result, $item, list-separator($list)); }} @return $result;}
@function ___gf-list-unique($list) { @if ___gf-list-missing(___gf-list-to-list) == true { @return null; } $result: (); @each $item in $list { @if not index($result, $item) { $result: append($result, $item, list-separator($list)); }} @return ___gf-list-to-list($result); }
@function ___gf-list-merge($lists...) { @if ___gf-list-missing(___gf-list-flatten, ___gf-list-unique) == true { @return null; } $result: ___gf-list-unique(___gf-list-flatten($lists)); @return $result; }
@function ___gf-list-explode($string, $delimiter: '', $separator: "space") { $result: (); $length: str-length($string); @if not index("space" "comma", $separator) { $separator: "space"; }@if str-length($delimiter) == 0 {@for $i from 1 through $length { $result: append($result, str-slice($string, $i, $i)); } @return $result; } $running: true; $remaining: $string; @while $running { $index: str-index($remaining, $delimiter); @if not $index { $running: false; } @else { $slice: str-slice($remaining, 1, $index - 1); $result: append($result, $slice, $separator); $remaining: str-slice($remaining, $index + str-length($delimiter)); } } @return append($result, $remaining, $separator); }
@function ___gf-list-to-list($value, $separator: list-separator($value)) { @if type-of($value) != "list" or list-separator($value) != $separator { $new-list: if($separator == "comma", sl-comma-list(), ()); @each $item in $value { $new-list: append($new-list, $item, $separator); } @return $new-list; } @return $value; }
// Map helper functions  
@function __gf-str-replace($arglist...) { @return str-replace($arglist...); }
@function __gf-list-flatten($arglist...){ @return if(function-exists(sl-flatten), sl-flatten($arglist...), ___gf-list-flatten($arglist...)); }
@function __gf-list-unique($arglist...) { @return if(function-exists(sl-remove-duplicates), sl-remove-duplicates($arglist...), ___gf-list-unique($arglist...)); }
@function __gf-list-merge($arglist...)  { @return if(function-exists(sl-union), sl-union($arglist...), ___gf-list-merge($arglist...)); }
@function __gf-list-explode($arglist...){ @return if(function-exists(sl-explode), sl-explode($arglist...), ___gf-list-explode($arglist...)); }



// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
//
//  General notes: 
// 
//  If a text value is passed we can't add it to      
//  a combined request – as it will affect all.
//  Also we do not need a subset
//
//  Subsets are treated as globals why you only
//  need to add it once in a combined request.
//  Though it is possible to define subsets in 
//  the mixin it is recommended to use the 
//  $google-font-subsets map.
//

// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
//
//  Google font subsets (true = enabled)
//  By default google will deliver Latin
//  Why it is only required if needed in
//  combination with another subset
// 
$google-font-subsets: (
  'arabic'      :false
, 'cyrillic'    :false
, 'cyrillic-ext':false
, 'devanagari'  :false
, 'freek'       :false
, 'greek-ext'   :false
, 'hebrew'      :false
, 'khmer'       :false
, 'latin'       :false  
, 'latin-ext'   :false
, 'telugu'      :false
, 'vietnamese'  :false
) !default;

// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
// 
//  Google font list and context (internal use only) 
//
$__gf: () !default;
$__gf-combine: false !default; 


// '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''  
//
//  Google Font Mixin
//  $name    : The name of the font
//  $weight  : Font weight 100-900 (default 400)   
//  $style   : Font style normal/italic/oblique (default normal)
//  $subset  : Font subsets 
//  $text    : Reduce font to these characters ()
@mixin google-font(
    $name: null,     // string
    $weight: 400,    // number
    $style: normal,  // string
    $subset: null,   // list or quoted string
    $text: null      // quoted string   
    ){
    
        //
        // TODO - Add parser to handle positional arguments 
        // and keywords (switch to arglist...) 
        // 
    
    
        //
        // Base url 
        // 
        $URL: '//fonts.googleapis.com/css?family=';

        //
        // Add font to list or print out @import
        //
        @if $name {
          
            //
            //  Clean up name, style and weight 
            //
            $name: __gf-str-replace(inspect(unquote($name)), ' ', '+'); 
            $style: to-lower-case($style);
            $weight: if($style == normal, $weight, $weight+$style);   
            
            //
            //  If subset is passed as a string explode it into a list 
            //
            @if type-of($subset) == string {
                $delimiter: if(str-index($subset, ','), ',', ' ');
                $subset: __gf-list-explode($subset, $delimiter);
            }
            // 
            //  Add enabled subsets from $google-font-subsets
            //
            @each $key, $value in $google-font-subsets {
              @if $value { $subset: append($subset, unquote($key), comma); }
            }             
            
            //
            //  If not in a combine context or text value
            //  is passed print out the @import. 
            //  Else add the font as map to the global list 
            //  
            @if $__gf-combine == false or $text{
                $weight: ':' + $weight;
                $subset: if($subset and $subset !=() and not $text, '&subset='+$subset, '');
                //
                //  Encode special characters
                //
                @if $text {
                    $encode:('!':'%21','#':'%23','$':'%24','&':'%26','\'':'%27',
                             '(':'%28',')':'%29','*':'%2A','+':'%2B',',':'%2C',
                             '/':'%2F',':':'%3A',';':'%3B','=':'%3D','?':'%3F',
                             '@':'%40','[':'%5B',']':'%5D',' ':'%20');
                    $chars : __gf-list-unique(__gf-list-explode($text));
                    $text: '';
                    @for $i from 1 through length($chars){ 
                        $replace: map-get($encode, nth($chars,$i));
                        $text: $text + if($replace, $replace, nth($chars,$i));
                    }
                    $text:'&text='+$text
                } @else {
                    $text:'';    
                }
                @import url(__gf-str-replace(#{$URL}#{$name}#{$weight}#{$subset},' ','')#{$text}); 
            }@else {
              $subset: if($subset, $subset, null);
              $__gf: append($__gf, (name:$name, weight: $weight, subset: $subset)) !global;
            }
        } 
        //
        //  Combine
        //
        @else {
          //
          //  Enable combine context 
          //
          $__gf-combine: true !global;
          
          //
          //  Nested mixins – now in a combine context
          //
          @content;
          
          //
          //  Map to hold the combined fonts
          //
          $combine-map:();
          
          //
          //  Loop through the global list and add
          //  font map values to the combined map
          //
          @for $i from 1 through length($__gf){
            //
            //  Get the font map, name and already
            //  mapped values
            // 
            $font  : nth($__gf,$i);
            $name  : map-get($font, name);
            $mapped: map-get($combine-map, $name);
            //
            //  If font is not mapped add it 
            //  to the combined map
            // 
            @if not $mapped {
              $combine-map: map-merge($combine-map, ($name: $font));
            } 
            //
            //  If font is mapped merge weights and subsets  
            //  with the existing values 
            // 
            @else {
              $weight: map-get($font, weight);
              @if $weight {
                $weight: __gf-list-merge(map-get($mapped, weight), $weight);
              }
              $subset: map-get($font, subset);
              @if $subset {
                $subset: __gf-list-merge(map-get($mapped,subset), $subset);
              }
              $combine-map: map-merge($combine-map, ($name: (name:$name, weight: $weight, subset: $subset)));
            }
          }
          //
          //  Create the combined query string
          //
          $name-weight:'';
          $subsets:();
          @each $key, $value in $combine-map {
            $name   : map-get($value, name);
            $weight : map-get($value, weight);
            $subset : map-get($value, subset);
            @for $i from 1 through length($subset){
              @if nth($subset, $i) and not index($subsets, nth($subset, $i)){
                $subsets: append($subsets, nth($subset, $i), comma);
              }
            }
            $subset: if($subsets and $subsets !=(), '&subset='+$subsets, '');
            $name-weight: $name-weight + if($name-weight =='','','|')+ $name + ':' + $weight;
          }     
              @import url(__gf-str-replace(__gf-str-replace(#{$URL}#{$name-weight}#{$subset},' ',''),'"','')); 
          $__gf-combine: false !global;  
          $__gf: () !global;
        }
}
    </code>
    <h2>TODO's</h2>
    <ul>
        <li><s>URL encoding on $text</s></li>        
        <li>Rework subset handling – too quick-fixed</li>             
        <li>LibSass compatability</li>        
        <li>Parser to handle positional arguments and keywords (switch to arglist...)</li>
        <li>General housekeeping and optimizations</li>
    </ul>
    <hr />
    <h1 id="sneak-peek">Version 1.2 comming up</h1>
    <p>I'm working on a new version allowing you to pass multiple fonts, weights and styles in one include.  Please return for updates :-)</p> 
<code data-ace-theme="tomorrow" 
          data-ace-mode="scss" 
          data-ace-cursor="false">
  // _________________________________________________________________
  //
  //  Gonfig
  //  
  // _________________________________________________________________
  // 
  //  To provide flexibility google-font can be set to handle multiple 
  //  fonts, weights and styles in one include. This does not affect 
  //  the output compared with individual includes (recommended). 
  //
  //  You can en-/disable each feature individually.
  //  Be aware of output as all combinations will be added to the import. 
  //  Also note that when multi-fonts is enabled all multi word font names
  //  like Open Sans must be quoted 'Open Sans'
  // 
  //  By default only multiple weights are allowed as it is what  
  //  is most likely to be used and does not cause unforseen 
  //  output combinations (and heavy load)
  // 
  //  @import google-font(Open Sans, 300 400 600);
  //  @import google-font(Open Sans, 300 400 600, italic);
  //
  $google-font-enable-multi-fonts  : false !default;
  $google-font-enable-multi-weights: true  !default;
  $google-font-enable-multi-styles : false !default;
  //
  //  To ease the job of handling subsets it is recommended you use the 
  //  $google-font-subsets map. Simply switch the value to true and the 
  //  subset will be added to all your imports
  // 
  $google-font-subsets: (
      'arabic'      :false
    , 'cyrillic'    :false
    , 'cyrillic-ext':false
    , 'devanagari'  :false
    , 'greek'       :false
    , 'greek-ext'   :false
    , 'hebrew'      :false
    , 'khmer'       :false
    , 'latin'       :false  
    , 'latin-ext'   :false
    , 'telugu'      :false
    , 'vietnamese'  :false
  ) !default;  





@mixin google-font($name: null, $weight: 400, $style: normal, $text: null, $subset: null){

    $URL    : '//fonts.googleapis.com/css?family=';
    $_name  : ();
    $_weight: ();
    $_style : ();
    $_subset: ();
    
    // _________________________________________________________________
    // 
    //  Import or add to font list
    // 
    // _________________________________________________________________
    @if $name {
      @if $google-font-enable-multi-fonts   == false { $name: #{$name}; }
      @if $google-font-enable-multi-weights == false and type-of($weight) == list { $weight: nth($weight, 1); }      
      @if $google-font-enable-multi-styles  == false and type-of($style) == list  { $style : nth($style,  1); }
      @if type-of($name)   == string { $_name  : append((), $name,   comma); } 
      @if type-of($name)   == list   { $_name  : join((),   $name,   comma); }
      @if type-of($weight) == number { $_weight: append((), $weight, comma); } 
      @if type-of($weight) == list   { $_weight: join((),   $weight, comma); }
      @if type-of($style)  == string { $_style : append((), $style,  comma); } 
      @if type-of($style)  == list   { $_style : join((),   $style,  comma); }    
      @if type-of($subset) == string { $_subset: append((), $subset, comma); } 
      @if type-of($subset) == list   { $_subset: join((),   $subset, comma); }
      
      // ------------------------------------------------
      //  Name
      // ------------------------------------------------
      //  Replace spaces in font name with + and 
      //  remove duplicates
      // 
      $_temp: ();
      @for $i from 1 through length($_name){
        $_temp: append($_temp, __gf-str-replace(#{unquote(nth($_name, $i))},' ','+'), comma)
      }
      $_name: __gf-list-unique($_temp);
      
      // ------------------------------------------------
      //  Weight and style
      // ------------------------------------------------
      //  Add default weight and style if null
      //  Concatinate weight and style if needed
      //  Remove duplicates 
      //
      $_weight: if(length($_weight)>0, $_weight, (400));
      $_style : if(length($_style)>0, $_style, (normal));
      $_temp: ();
      @for $i from 1 through length($_weight){
        @for $j from 1 through length($_style){
          $w: nth($_weight, $i); $s: nth($_style, $j);
          $_temp: append($_temp, if($s == normal, $w, unquote($w+$s)), comma);   
        }
      }
      $_weight: __gf-list-unique($_temp);
      
      // ------------------------------------------------
      //  Subsets
      // ------------------------------------------------
      //  Add enabled subsets and remove diplicates
      //  if we are not requesting an optimized font
      //
      $_temp:();
      @if length($_subset) > 0 {
        @for $i from 1 through length($_subset){
          $_temp: append($_temp, unquote(nth($_subset, $i)), comma);
        }
      }
      @each $key, $value in $google-font-subsets {
          @if $value { $_temp: append($_temp, unquote($key), comma); }
      }
      $_subset: __gf-list-unique($_temp);
       
      
      // ------------------------------------------------
      //  Text
      // ------------------------------------------------
      //  Remove duplicate characters and encode 
      //    
      @if $text {
        $encode:('!':'%21','#':'%23','$':'%24','&':'%26','\'':'%27',
                 '(':'%28',')':'%29','*':'%2A','+':'%2B',',':'%2C',
                 '/':'%2F',':':'%3A',';':'%3B','=':'%3D','?':'%3F',
                 '@':'%40','[':'%5B',']':'%5D',' ':'%20');
        $chars : __gf-list-unique(__gf-list-explode($text));
        $text: '';
        @for $i from 1 through length($chars){ 
            $replace: map-get($encode, nth($chars,$i));
            $text: $text + if($replace, $replace, nth($chars,$i));
        }
      }
      
      // ------------------------------------------------
      //  Create single import query
      // ------------------------------------------------
      @if $__gf-combine == false or $text { 
        $query:'';
        @for $i from 1 through length($_name){
          $query: #{$query}#{if($i > 1,'|','')};
          $query: #{$query}#{nth($_name, $i)};
          // We don't need weight if we only request normal (400)
          @if not(length($_weight) == 1 and nth($_weight, 1) == 400) {
            $query: #{$query}#{':'+$_weight};  
          }
        }
        //  We don't need subset when passing text
        @if not $text {
          $query: #{$query}#{if(length($_subset) > 1,#{'&subset='+$_subset},'')};
        } @else {
          $query: #{$query}#{'&text='+$text};            
        }
        
        // Remove spaces 
        $query: __gf-str-replace($query, ' ','');
        
        // Create single import
        @import url(#{$URL}#{$query});
      }
      
      // ------------------------------------------------
      //  Push to font list to combine
      // ------------------------------------------------        
      @else {
        @for $i from 1 through length($_name){
          $__gf-list: append($__gf-list, (name: nth($_name, $i), weight:$_weight, subset: $_subset), comma) !global;  
        }
      }
    }

    // _________________________________________________________________
    // 
    //  Combined import 
    // 
    // _________________________________________________________________

    @else {
      // ------------------------------------------------
      // Set combine marker and include nested 
      // content (now in a combine syntax)
      // ------------------------------------------------
      $__gf-combine: true !global;
      @content;
      
      
      // ------------------------------------------------      
      //  Loop throug each item in the font list and
      //  merge values with already mapped values 
      // ------------------------------------------------
      @if length($__gf-list) > 0 {
        //  Map to hold combined fonts
        $combine-map:();        
        @for $i from 1 through length($__gf-list){
          $font  : nth($__gf-list, $i);
          $name  : map-get($font, name);  
          $mapped: map-get($combine-map, to-lower-case($name));
          $_weight: join(if($mapped,map-get($mapped, weight),()), map-get($font, weight), comma);
          $_subset: join(if($mapped,map-get($mapped, subset),()), map-get($font, subset), comma);
          $combine-map: map-merge($combine-map, (to-lower-case($name):(name: $name, weight: __gf-list-unique($_weight), subset: __gf-list-unique($_subset))));
        }
  
        // ------------------------------------------------
        //  Create combined import query
        // ------------------------------------------------
        $query:'';
        $subsets:();
        @each $key, $font in $combine-map {
          $_name  : map-get($font, name); 
          $_weight: map-get($font, weight);
          $_subset: map-get($font, subset);
          $query: #{$query}#{if($query != '', '|', '')};
          $query: #{$query}#{$_name};
          @if not(length($_weight) == 1 and nth($_weight, 1) == 400) {
            $query: #{$query}#{':'+$_weight};
          }            
          $subsets: join($subsets, $_subset, comma);
        }
        
        // Remove redundant subsets and spaces
        $subsets: __gf-list-unique($subsets); 
        $query: #{$query}#{if(length($subsets)>0, '&subset='+$subsets, '')};
        $query: __gf-str-replace($query, ' ','');
        
        // Create combined import
        @import url(#{$URL}#{$query});
      }
 
      // ------------------------------------------------
      //  Reset combine marker and enpty font list
      // ------------------------------------------------
      $__gf-combine: false !global;
      $__gf-list: () !global;
    }
  }
  // Variables for internal use  
  $__gf-list:();
  $__gf-combine: false;
  // Helper functions (SassyLists ripoff)
  @function ___gf-list-to-list($value, $separator: list-separator($value)) { @if type-of($value) != "list" or list-separator($value) != $separator { $new-list: if($separator == "comma", sl-comma-list(), ()); @each $item in $value { $new-list: append($new-list, $item, $separator); } @return $new-list; } @return $value; }
  @function ___gf-list-unique($list) { $result: (); @each $item in $list { @if not index($result, $item) { $result: append($result, $item, list-separator($list)); }} @return ___gf-list-to-list($result); }
  @function ___gf-list-explode($string, $delimiter: '', $separator: "space") { $result: (); $length: str-length($string); @if not index("space" "comma", $separator) { $separator: "space"; }@if str-length($delimiter) == 0 {@for $i from 1 through $length { $result: append($result, str-slice($string, $i, $i)); } @return $result; } $running: true; $remaining: $string; @while $running { $index: str-index($remaining, $delimiter); @if not $index { $running: false; } @else { $slice: str-slice($remaining, 1, $index - 1); $result: append($result, $slice, $separator); $remaining: str-slice($remaining, $index + str-length($delimiter)); } } @return append($result, $remaining, $separator); }
  // Map helper functions 
  // If SassyLists are imported we use the real thing
  @function __gf-str-replace($string, $search, $replace: '') {$index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + __gf-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); }@return $string; }
  @function __gf-list-unique($arglist...) { @return if(function-exists(sl-remove-duplicates), sl-remove-duplicates($arglist...), ___gf-list-unique($arglist...)); }
  @function __gf-list-explode($arglist...){ @return if(function-exists(sl-explode), sl-explode($arglist...), ___gf-list-explode($arglist...)); }

   
  
  
  $google-font-enable-multi-fonts  : true;
  $google-font-enable-multi-weights: true;
  $google-font-enable-multi-styles : true;
  $google-font-subsets: (
    'arabic'      :false
  , 'cyrillic'    :false
  , 'cyrillic-ext':false
  , 'devanagari'  :false
  , 'greek'       :false
  , 'greek-ext'   :false
  , 'hebrew'      :false
  , 'khmer'       :false
  , 'latin'       :false  
  , 'latin-ext'   :false
  , 'telugu'      :false
  , 'vietnamese'  :false
);  

@include google-font {  
  @include google-font('Open Sans' 'Lato', 300 400, italic normal);
  @include google-font('Open Sans' 'Lato', 600, italic, 'Lorem ipsum dolor sit amet!');
}
    
    
// CSS Output
// @import url(//fonts.googleapis.com/css?family=Open+Sans:600italic|Lato:600italic&text=Lorem%20ipsudlta%21);
// @import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400|Lato:300italic,300,400italic,400);
    
    
    </code> 

        
</article>
-->
              
            
!

CSS

              
                
//  –––––––––––––––––––––––––––––––––––
//    A taste of own medicine :-)
//  –––––––––––––––––––––––––––––––––––
@include google-font {
    @include google-font(Lato, 300 400 700);    
    @include google-font(Open Sans);    // <= not used just to show it works 
    @include google-font(Marck Script, $text: 'F');
}








html {
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: inherit;
}
fieldset  { border:0; }
article {
  max-width: 860px;
  margin: 0 auto;
  background: white;
}

h1 {
  font: 300 40px Lato, sans-serif;
  color: #dc463c;
}

h1 span {
  font-size: 12px;
  position: absolute;
}

h2 {
  font: 400 18px Lato, sans-serif;
  color: #dc463c;
}

p strong {
  font-weight: 700;
}

p, li, a {
  font: 400 16px Lato, sans-serif;
  color: #333;
  max-width: 600px;
}

h1 {
  display: inline-block;
  position: relative;
}

h1:after {
  content: 'F';
  display: block;
  font: 30px/38px 'Marck Script';
  background-color: #dc463c;
  color: #fff;
  border-radius: 7px;
  position: absolute;
  top: 2px;
  right: -70px;
  width: 45px;
  height: 45px;
  padding: 5px;
  text-align: center;
}

a {
  color: #dc463c;
  text-decoration: none;
}
a:hover {
  background-color: #dc463c;
  color: #fff;
  outline: 5px solid #dc463c;
}

span {
  color: #999;
}

article, section, header, code {
  display: block;
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 20px 100px;
}

code {
  margin: 20px 0;
  font-family: monospace;
}

code * {
  font-size: 10px;
}

input {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  margin: 20px 0 0;
  background: whitesmoke;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: 0;
}

.small {
  font-size: 12px;
}

ul {
  margin: 0;
  padding-left: 20px;
  padding-bottom: 20px;
}

li {
  max-width: 520px;
  margin-bottom: 8px;
}

.note {
  padding: 10px 20px;
  background: whitesmoke;
  border-radius: 5px;
  margin-bottom: 20px;
}



fieldset {border:0;}
input { outline: 0; }
input::-moz-selection { background: #dc463c;color:white; }
input::selection { background: #dc463c;color:white; }  
              
            
!

JS

              
                //
// Editor: //cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js
var theme='ace/theme/tomorrow';
var mode='ace/mode/scss';
$('code').each(function(){
var editor= ace.edit(this);  
    editor.setTheme('ace/theme/'+$(this).attr('data-ace-theme'));
    editor.getSession().setMode('ace/mode/'+$(this).attr('data-ace-mode'));
    editor.renderer.setShowGutter(false); 
    editor.setShowPrintMargin(false);
    editor.setShowPrintMargin(false);
    editor.setDisplayIndentGuides(false);
    
    editor.setOptions({ 
      maxLines: Infinity, 
      //readOnly: false,
      highlightActiveLine: false,
      highlightGutterLine: false      
    });
    if($(this).attr('data-ace-cursor')==='false'){
      $('.ace_hidden-cursors').hide();
    }
    // https://ace.c9.io/api/virtual_renderer.html
    // 
});

// Select on click
$("input[type='text']").on('click',function () { $(this).select(); });
              
            
!
999px

Console