webfonts.scss

/* This is a quick Sass mixin that makes it easier to import Google Web Fonts into your CSS.
 * By default, it will import Open Sans with a weight of 400.
 * It can take up to two parameters, $name and $weights.
 * $name is the name of the font. Make sure you use plus characters instead of spaces,
 * and if the font name does include spaces, it must be enclosed in quotes.
 * $weights is a list containing the weights required.
 * Weights are given as a comma-seperated list enclosed in parentheses.
 */
 
/***** Important! *****
 It may appear that this mixin hasn't outputted anything,
 as the @import statements will not appear where they are supposed to in the outputted CSS.
 Instead, you will find that they have been pushed to the top of your CSS file,
 as it is best practice to put all @import statements at the start of a CSS file.
*/

@mixin web-font($name: 'Open+Sans', $weights: ()) {
  
  // This is the base URL, and the one that will be used if $weights is an empty list.
  $url: 'http://fonts.googleapis.com/css?family=' + $name;
  
  // If custom weight(s) are specified.
  @if length($weights) > 0 {
    $url: $url + ':';
  }
  
  $counter: 0;
  @each $weight in $weights {
    $url: $url + $weight;
    
    // If this is not the last weight, add a seperator comma.
    $counter: $counter + 1;
    @if $counter < length($weights) {
      $url: $url + ',';
    }
  }  
  
  // Import the font.
  @import url($url);
}

/***** SAMPLES *****/
@include web-font; // Imports Open Sans 400.
@include web-font(Ubuntu); // Imports Ubuntu 400.
@include web-font(Ubuntu, (700)); // Imports Ubuntu 700.
@include web-font(Ubuntu, (400, 700)); // Imports Ubuntu 400 and 700.
@include web-font('Denk+One'); // Imports Denk One (Use + instead of a space and enclose in single quotes).