Google Web Font SASS Mixin

index.html

<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ipsa assumenda officia ipsam numquam maxime fugit, aliquam dolore aliquid soluta veritatis reiciendis doloremque consequuntur eum doloribus commodi! Minima, optio, earum.</p>

rVOMWY.markdown

Google Web Font SASS Mixin

A Pen by LukyVJ on CodePen.

License.

style.css

@import url("http://fonts.googleapis.com/css?family=Josefin+Slab:500, 600");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:500, 600");
h1 {
  font-family: "Josefin Slab";
}

p {
  font-family: "Open Sans";
}

style.scss

@import "compass/css3";
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@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

$font-array: 'Josefin Slab', 'Open Sans';

@mixin gwf($fonts, $weight){
  @each $font in $fonts{
    $font: str-replace($font, ' ', '+'); 
    @import url('http://fonts.googleapis.com/css?family=#{$font}:#{$weight}');
  }
}
@include gwf($font-array, '500, 600');
 
 h1{
   font-family: "Josefin Slab"; 
 }

p{
  font-family: "Open Sans";
}