ricardozea
2/9/2013 - 3:52 AM

SCSS: @font-face mixin for Sass (with Bourbon)

SCSS: @font-face mixin for Sass (with Bourbon)

//@font-face
// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
      font-family: $font-family;
      src: url('#{$file-path}.eot'); //IE9 Compat Modes
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), //IE6-IE8
           url('#{$file-path}.woff') format('woff'), //Modern Browsers
           url('#{$file-path}.ttf') format('truetype'), //Safari, Android, iOS
           url('#{$file-path}.svg##{$font-family}') format('svg'); //Old iOS devices
      font-weight: $weight;
      font-style: $style;
  }
}

//Usage:
@include font-face(Font-Name, 'path/to/font') //No need to specify the file extension
//Example: 
@include font-face(Franchise, '../fonts/franchise')

//Compiles to... [the CSS comments are only for reference, they don't really compile with this mixin]
@font-face {
    font-family: Franchise;
    /*IE9 Compat Modes*/
    src: url("../fonts/franchise.eot");
    /*IE6-IE8*/
    src: url("../fonts/franchise.eot?#iefix") format("embedded-opentype"),
         /*Modern Browsers*/
         url("../fonts/franchise.woff") format("woff"),
         /*Safari, Android, iOS*/
         url("../fonts/franchise.ttf") format("truetype"),
         /*Old iOS devices*/
         url("../fonts/franchise.svg#franchise") format("svg");    
    font-weight: normal;
    font-style: normal;
}