Use Bourbon's mixin, @font-face, to easily include Fonts into your project.

readme.md

• Be sure to restart your rails server if you add new files

• Disable font in Font Book

• Separate:

  • https://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index.html#//apple_ref/doc/uid/DTS40008248-CH1-SUBSECTION11

mixin-ouput.css

/* @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular'); */

@font-face {
  font-family: SourceSansPro;
  font-weight: normal;
  font-style: normal;
  src: url(/assets/Source_Sans_Pro/SourceSansPro-Regular.eot);
  src:  url(/assets/Source_Sans_Pro/SourceSansPro-Regular.eot?#iefix) format("embedded-opentype"), 
        url(/assets/Source_Sans_Pro/SourceSansPro-Regular.woff) format("woff"), 
        url(/assets/Source_Sans_Pro/SourceSansPro-Regular.ttf) format("truetype"), 
        url(/assets/Source_Sans_Pro/SourceSansPro-Regular.svg#SourceSansPro) format("svg");
}

mixin-source.scss

// Taken from: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
  @font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;

    @if $asset-pipeline == true {
      src: font-url('#{$file-path}.eot');
      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
           font-url('#{$file-path}.woff')                format('woff'),
           font-url('#{$file-path}.ttf')                 format('truetype'),
           font-url('#{$file-path}.svg##{$font-family}') format('svg');
    } @else {
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
           url('#{$file-path}.woff')                     format('woff'),
           url('#{$file-path}.ttf')                      format('truetype'),
           url('#{$file-path}.svg##{$font-family}')      format('svg');
    }
  }
}

mixin-usage.scss

/*
 * Taken from: http://bourbon.io/docs/#font-face 
 */

// Wordpress/Drupal/etc ways to use
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);

// Rails asset-pipeline - place fonts in app/assets/fonts/. Remember to restart 
// you server
@include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);