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;
}