SCSS mixing for generating @font-face constructs.

font-face-mixin.scss

@mixin font($family, $file, $weight, $style, $locals) {
  $prefix: "http://localhost:3000/fonts";

  $src: null;
  @each $local in $locals {
    $src: append($src, local($local), comma);
  }
  $src: append($src, url("#{$prefix}/#{$file}.eot?#iefix") format("embedded-opentype"), comma);
  $src: append($src, url("#{$prefix}/#{$file}.woff2") format("woff2"), comma);
  $src: append($src, url("#{$prefix}/#{$file}.woff") format("woff"), comma);
  $src: append($src, url("#{$prefix}/#{$file}.ttf") format("truetype"), comma);
  $src: append($src, url("#{$prefix}/#{$file}.svg#Montserrat") format("svg"), comma);

  @font-face {
    font-family: "#{$family}";
    font-style: $style;
    font-weight: $weight;
    src: url("#{$prefix}/optin/fonts/#{$file}.eot");
    src: $src;
  }
}

@include font(
  "Montserrat",
  "montserrat-v14-latin-ext_latin-regular",
  400,
  normal,
  "Montserrat Regular" "Montserrat-Regular"
);
@include font(
  "Montserrat",
  "montserrat-v14-latin-ext_latin-800",
  800,
  normal,
  "Montserrat ExtraBold" "Montserrat-ExtraBold"
);
@include font(
  "Source Code Pro",
  "source-code-pro-v10-latin-900",
  900,
  normal,
  "Source Code Pro Black" "SourceCodePro-Black"
);