Opinionated @font-face SASS mixin for embedding with better style and weight control.

mixin--font-specimen.scss

/**
 * Embed @font-face with better style and weight control.
 * 
   @include font-specimen(OpenSans, normal, 300);
   @include font-specimen(OpenSans, normal, 400);
   @include font-specimen(OpenSans, italic, 600);
 *
 * Depends on a specific filename scheme; edit the `url` paths to match your setup.
 *
 */
@mixin font-specimen($font-name, $font-style, $font-weight) {
  @font-face {
    font-family: '#{$font-name}';
    src: url('#{$font-name}--#{$font-style}-#{$font-weight}.eot');
    src: url('#{$font-name}--#{$font-style}-#{$font-weight}.eot?#iefix') format('embedded-opentype'),
         url('#{$font-name}--#{$font-style}-#{$font-weight}.woff') format('woff'),
         url('#{$font-name}--#{$font-style}-#{$font-weight}.svg##{$font-name}--#{$font-style}-#{$font-weight}') format('svg');
    font-style: $font-style;
    font-weight: $font-weight;
  }
}