SCSS Font-Map Mixin

_font-map.scss

@mixin fontMap($fontPath, $font, $fontData) {
  @each $name, $attributes in $fontData {
    $src: null;
    $exts: ("woff2": "woff2", "woff": "woff", "ttf": "truetype");
    @if map-get($attributes, "hasOtf") {
      $exts: map-merge($exts, ("otf": "opentype"));
    }
    @each $ext, $mime in $exts {
      $src: append($src, url("#{$fontPath}/#{$name}/#{$font}-#{$name}.#{$ext}") format($mime), comma);
    }
    @font-face {
      font: {
        family: $font;
        style: map-get($attributes, "style");
        weight: map-get($attributes, "weight");;
      }
      src: $src;
    }
  }
}

main.scss

$fontPath: "~assets/fonts/Montserrat";

$montserratFontData: (
  "Medium": (
    "weight": 500,
    "style": normal,
    "hasOtf": false
  ),
  "MediumItalic": (
    "weight": 500,
    "style": italic,
    "hasOtf": false
  ),
  "SemiBold": (
    "weight": 700,
    "style": normal,
    "hasOtf": false
  ),
  "SemiBoldItalic": (
    "weight": 700,
    "style": italic,
    "hasOtf": false
  ),
);

@include fontMap($fontPath, "Montserrat", $montserratFontData)