Google-web-font loading

_google-web-font.scss

// ----
// libsass (v3.2.2)
// ----

/* # Dynamically import only used Google Webfonts


@see <http://advancedsass.com/articles/dynamically-import-only-used-google-webfonts.html>
*/

$used-fonts: ();

@function import-google-fonts() {
  $fonts: "";

  @each $family, $variations in $used-fonts {
    // Create url-friendly name (replace space with +):
    $family-string: str-replace($family, ' ', '+');
    
    // Combine variations into a comma separated string:
    $variations-string: "";
    @each $variation in $variations {
      $variations-string: "#{$variations-string},#{$variation}";
    }
    
    // Cut of the first character (unwanted comma):
    $variations-string: str-slice($variations-string, 2);
    
    // Combine family and variatons in $fonts,
    // separated by a pipe (for the Google URL):
    $fonts: "#{$fonts}|#{$family-string}:#{$variations-string}";
  }
  
  // Cut of the first character (unwanted pipe):
  $fonts: str-slice($fonts, 2);
  
  // Import only the used Google fonts!
  @return "http://fonts.googleapis.com/css?family=#{$fonts}";
}

// Source for this str-replace() function:
// http://sassmeister.com/gist/1b4f2da5527830088e4d
@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;
}

@mixin track-fonts($family, $weight, $style) {
  // First check if we already knew this one:
  @if map-has-key($used-fonts, $family) == false {
    // Font-family isn't in the map yet, so add it.
    // The key for the nested map is the font name:
    $used-fonts: map-merge($used-fonts, ($family: ())) !global;
  }
  
  // Now check if this weight and style are known,
  // using Google's "400italic" notation.
  // If style is "normal", only use the weight:
  $weight-style: if($style == normal, $weight, #{$weight}#{$style});
  $font-map: map-get($used-fonts, $family);
  @if index($font-map, $weight-style) == null {
    // Weight and style aren't in the map yet, so add it:
    $variations: append($font-map, $weight-style);
    $used-fonts: map-merge($used-fonts, ($family: $variations)) !global;
  }
}

@mixin font($family, $weight: 400, $style: normal) {
  // Call our custom function to do the heavy lifting:
  @include track-fonts($family, $weight, $style);
  font-family: $family;
  font-weight: $weight;
  font-style: $style;
}


//----------------------------------------------------*/
// USAGE
//----------------------------------------------------*/

.normal {
  // Regular font-weight (400), normal font-style:
 @include font("Open Sans", 400);
}

.bold {
  // Bold (weight of 700), normal font-style:
  @include font("Open Sans", 700);
}

.semi-bold-italic {
  // Semi-bold (weight of 600), italic font-style:
  @include font("Open Sans", 600, italic);
}

.other-font {
  // Different font, bold (weight of 700)
  @include font("PT Serif", 700);
}

$import: import-google-fonts();
@import url(#{$import});

google-web-font-output.css

/* # Dynamically import only used Google Webfonts


@see <http://advancedsass.com/articles/dynamically-import-only-used-google-webfonts.html>
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600italic|PT+Serif:700);
.normal {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
}

.bold {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
}

.semi-bold-italic {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: italic;
}

.other-font {
  font-family: "PT Serif";
  font-weight: 700;
  font-style: normal;
}