Modern browsers webfont mixin

_mixins.scss

// update paths as needed if /fonts/ is not right for your site

@mixin font-face($fontname, $filename: $fontname, $weight: normal, $style: normal) {
  @font-face {
    font-family: $fontname;
    src: url('/fonts/#{$filename}.woff2') format('woff2'),
         url('/fonts/#{$filename}.woff') format('woff');
    font-weight: $weight;
    font-style: $style;
  }
}

example.scss

@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-regular');
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-italic', 400, italic);
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-700', 700);
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-700-italic', 700, italic);