SCSS/SASS mixin `@font-face`

_font-face.mixin.scss

$font-dir: null !default;

///
/// Returns font format.
///
/// @param {string} $src The font filename
/// @return {string}
///
@function font-format($src) {
  $formats: (
    "woff": "woff",
    "woff2": "woff2",
    "ttf": "truetype",
    "otf": "opentype",
    "svg": "svg"
  );
  @return map-get($formats, str-slice($src, str-index($src, '.') + 1));
}

///
/// @param {string} $family the font name
/// @param {string|list} $src the path font file(s)
/// @param {string|number} $weight the font weight: 400/`lighter`, 500/`normal` or 700/`bold`
/// @param {string} $style the font style: `normal`, `italic`
/// @param {string|null} $basedir the base directory of fonts, prepends to $src
/// @return {string}
///
@mixin font-face($family, $src, $weight: 400, $style: normal, $basedir: $font-dir) {
  @font-face {
    font-family: $family;
    font-weight: $weight;
    font-style: $style;
    @if type-of($src) == string {
      $format: font-format($src);
      $src: if($basedir == null, quote($src), "#{$basedir}/#{$src}");
      src: url($src) format($format);
    } @else {
        $result: ();
      @each $url in $src {
        $format: font-format($url);
        $url: if($basedir == null, quote($url), "#{$basedir}/#{$url}");
        $result: append($result, url($url) format($format), comma);
      }
      src: $result;
    }
  }
}

generic.css

/**
 * $font-dir: "../fonts";
 * @include font-face(Foo, ["foo.ttf", "foo.woff2"]);
 */
@font-face {
  font-family: Foo;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/foo.ttf") format("ttf"), url("../fonts/foo.woff2") format("woff2");
}