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;
}
_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});