Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// Font-Face Proposal
// ==================
// - Needs file access to check for available font files & svg names.
// - Needs browser-support integration.

// the default formats to include
$font-formats: eot woff woff2 ttf otf svg svgz !default;

// font-face mixin
@mixin font-face($font) {
  $styles: italic oblique;
  $weights: 100 200 300 400 500 600 700 800 900 bold;
  $type-options: eot woff woff2 ttf otf svg svgz;
  $type-names: (
    ttf: 'truetype',
    otf: 'opentype',
    woff: 'woff',
    woff2: 'woff2',
    svg: 'svg',
    svgz: 'svg',
    eot: 'embedded-opentype',
  );

  $name: null;
  $path: null;
  $style: null;
  $weight: null;
  $types: ();
  $eot: null;
  $src: ();
  $svg-name: null;
  
  @each $item in $font {
    @if $item == normal {
      $style: $style or normal;
      $weight: $weight or normal;
    } @else if index($styles, $item) or index($weights, $item) {
      $style: if(index($styles, $item), $item, $style);
      $weight: if(index($weights, $item), $item, $weight);
    } @else if index($type-options, $item) {
      $types: append($types, $item);
    } @else if str-index($item, '#') == 1 {
      $svg-name: $item;
    } @else if $name or str-index($item, '/') {
      $path: $item;
    } @else {
      $name: $item;
    }
  }

  @if $path and not $name {
    $name: $path;
    @while str-index($name, '/') {
      $i: str-index($name, '/');
      $name: str-slice($name, $i + 1);
    }
  }
 
  $path: $path or $name;
  $types: if(length($types) > 0, $types, $font-formats);
  
  // SVG Name should come from svg file, if possible.
  $svg-name: $svg-name or '#' + $name;
  
  // Ideally, this checks for available files in the specified location
  // before adding them to the $eot or $src lists.
  @each $type in $types {
    $url: $path + '.' + $type;
    
    @if $type == eot {
      $eot: font-url($url);
      $url: $url + '?#iefix';
    } @else if $type == svg or $type == svgz {
      $url: $url + $svg-name;
    }
    
    $this: font-url($url) format(map-get($type-names, $type));
    $src: append($src, $this, comma);
  }
 
  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    
    // IE9 compat mode (eot)
    src: $eot; 

    // IE6-IE8 (eot)
    // Modern Browsers (woff, woff2)
    // Safari, Android, iOS (ttf, otf)
    // Legacy iOS (svg, svgz)
    src: $src;
  }
}


// Usage
// -----

// set the font types tou want to use (if they exist)
$font-formats: eot woff ttf;

/* Name: my-font 
   Files: <font-folder>/my-font.<font-formats> */
@include font-face(my-font);

/* Add "normal" style/weight properties */
@include font-face(my-font normal);

/* Add "bold" weight */ 
@include font-face(my-font-bold bold normal);

/* Set name based on path, use both "bold" and "italic" */
@include font-face(path/to/my-font-bold-italic bold italic);

/* Set name and path individually, use only "italic" */
@include font-face(my-font path/to/my-font-italic italic);

/* Override font-formats, set explicit svg-name, use "normal" and "italic" */
@include font-face(my-font woff svg #my-svg-name normal italic);

SassMeister-output.css

/* Name: my-font 
   Files: <font-folder>/my-font.<font-formats> */
@font-face {
  font-family: "my-font";
  src: url('/fonts/my-font.eot');
  src: url('/fonts/my-font.eot?#iefix') format("embedded-opentype"), url('/fonts/my-font.woff') format("woff"), url('/fonts/my-font.ttf') format("truetype");
}
/* Add "normal" style/weight properties */
@font-face {
  font-family: "my-font";
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/my-font.eot');
  src: url('/fonts/my-font.eot?#iefix') format("embedded-opentype"), url('/fonts/my-font.woff') format("woff"), url('/fonts/my-font.ttf') format("truetype");
}
/* Add "bold" weight */
@font-face {
  font-family: "my-font-bold";
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/my-font-bold.eot');
  src: url('/fonts/my-font-bold.eot?#iefix') format("embedded-opentype"), url('/fonts/my-font-bold.woff') format("woff"), url('/fonts/my-font-bold.ttf') format("truetype");
}
/* Set name based on path, use both "bold" and "italic" */
@font-face {
  font-family: "my-font-bold-italic";
  font-style: italic;
  font-weight: bold;
  src: url('/fonts/path/to/my-font-bold-italic.eot');
  src: url('/fonts/path/to/my-font-bold-italic.eot?#iefix') format("embedded-opentype"), url('/fonts/path/to/my-font-bold-italic.woff') format("woff"), url('/fonts/path/to/my-font-bold-italic.ttf') format("truetype");
}
/* Set name and path individually, use only "italic" */
@font-face {
  font-family: "my-font";
  font-style: italic;
  src: url('/fonts/path/to/my-font-italic.eot');
  src: url('/fonts/path/to/my-font-italic.eot?#iefix') format("embedded-opentype"), url('/fonts/path/to/my-font-italic.woff') format("woff"), url('/fonts/path/to/my-font-italic.ttf') format("truetype");
}
/* Override font-formats, set explicit svg-name, use "normal" and "italic" */
@font-face {
  font-family: "my-font";
  font-style: italic;
  font-weight: normal;
  src: url('/fonts/my-font.woff') format("woff"), url('/fonts/my-font.svg#my-svg-name') format("svg");
}