Generic font handling in SASS

font.scss

//
// mixin for bullet proof font declaration syntax
// pulled from: http://pivotallabs.com/bulletproof-font-face-syntax-with-sass/
//
// font-path is a rails helper which can be replaced with your font directory path
// when not using rails
//
@mixin declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url(font-path('#{$font-filename}/#{$font-filename}.eot'));
    src: url(font-path('#{$font-filename}/#{$font-filename}.eot?#iefix')) format('embedded-opentype'),
          url(font-path('#{$font-filename}/#{$font-filename}.woff')) format('woff'),
          url(font-path('#{$font-filename}/#{$font-filename}.ttf')) format('truetype'),
          url(font-path('#{$font-filename}/#{$font-filename}.svg##{$font-family}')) format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}

// 
// one declaration for each font you are including
//
@include declare-font-face('Trade Gothic W02 Roman', 'TradeGothicRoman');
@include declare-font-face('Trade Gothic W02 Bold 2', 'TradeGothicBd2');
@include declare-font-face('Trade Gothic W02 Bold Condensed', 'TradeGothicBdCn20');

// 
// placeholder classes for easy extending wherever you need a font 
//
%regularFont {
  font-family: 'Trade Gothic W02 Roman', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

%boldFont {
  font-family: 'Trade Gothic W02 Bold 2', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

%condensedFont {
  font-family: 'Trade Gothic W02 Bold Condensed', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}


// 
// Use it like this elsewhere
//
body {
  @extend %regularFont;
}

footer {
  @extend %condensedFont;
}

.main-nav {
  @extend %boldFont;
}