Sass Mixin: font-face

_font-face-mixin.scss

@mixin font-face($name, $files, $eot: false, $weight: false, $style: false) {
  $name: quote($name);
  @font-face {
    font-family: $name;
    @if $eot {
      src: url($eot);
      $files: join("#{$eot}", $files);
    }
    src: add-font-format($files, $name);
    @if $weight { 
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

@function add-font-format($fonts, $name: '') {
  $result: ();
  @each $font in $fonts {
    $format: '';
    $extension: str-slice($font, str-index($font, '.') + 1);
    @if $extension == "eot" {
      $font: "#{$extension}?#iefix";
      $format: 'embedded-opentype'
    } @elseif $extension == "ttf" {
      $format: 'truetype';
    } @else {
      $format: $extension;
    }
    @if $extension == "svg" {
      $font: '#{$font}##{$name}';
    }
    $result: append($result, unquote('url("#{$font}") format("#{$format}")'), comma);
  }
  @return $result;
}

_usage.scss

@include font-face('FontName', (
  'font.woff',
  'font.ttf',
  'font.svg'
), 'font.eot', 'bold', 'italic');

output.css

@font-face {
  font-family: "FontName";
  src: url("font.eot");
  src: url("eot?#iefix") format("embedded-opentype"), url("font.woff") format("woff"), url("font.ttf") format("truetype"), url("font.svg#FontName") format("svg");
  font-weight: "bold";
  font-style: "italic";
}