SASS and @font-face

For those looking for an SCSS mixin instead, including woff2, SASS list.append is useful for conditionally adding source files/formats:

@mixin fface(
  $path,
  $family,
  $type: "",
  $weight: 400,
  $style: normal,
  $local1: null,
  $local2: null,
  $ttf: null,
  $otf: null,
  $eot: null,
  $svg: null
) {
  $src: null; // initialize an empty source path
  // only load local files when both sources are present
  @if $local1 and $local2 {
    $src: append($src, local("#{$local1}"), comma);
    $src: append($src, local("#{$local2}"), comma);
  }

  @if $otf {
    $src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
  }

  // load default formats (woff and woff2)
  $src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
  $src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
  // formats that should only be added at the end
  @if $ttf {
    $src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
  }

  @if $svg {
    $src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
  }
  // the actual FONT FACE DECLARATION
  @font-face {
    font-family: $family;
    // for compatibility reasons EOT comes first and is not appended
    @if $eot {
      src: url("#{$path}#{$type}.eot");
    }
    // load appended sources path
    src: $src;
    font-weight: $weight;
    font-style: $style;
  }
}
// USAGE
$dir: "assets/fonts/";

// declare family name
$familyName: "MyFont";

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
  "#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
  "#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
  "#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);

// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";

@include fface(
  "#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
  $familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
@include fface(
  "#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
  "#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);

.material-icons {
  font-family: $familyName;
}

.material-icons-outline {
  font-family: "#{$familyName} Outline";
}

The $type parameter is used for locating different files within a $family.

If you get a can't resolve error, remember to double check your fonts directory ($dir).

In my case I use SASS Mixin:

@mixin font-face($family, $file, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url($path + $file + '.eot')
    src: url($path + $file + '.eot?#iefix') format('embedded-opentype'), url($path + $file + '.woff') format('woff'), url($path + $file + '.ttf') format('truetype'), url($path + $file + '.svg##{$svg}') format('svg')
    font-weight: $weight
    font-style: $style

Usage:

@include font-face('altivo', 'altivo-regular', '', 'altivo-regular')
@include font-face('altivo', 'altivo-medium', '', 'altivo-medium', 500, normal)
@include font-face('altivo', 'altivo-bold', '', 'altivo-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-regular', '', 'corsa-grotesk-regular')
@include font-face('corsa', 'corsa-grotesk-medium', '', 'corsa-grotesk-medium', 500, normal)
@include font-face('corsa', 'corsa-grotesk-bold', '', 'corsa-grotesk-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-xbold', '', 'corsa-grotesk-xbold', 800, normal)

Result:

@font-face {
  font-family: "altivo";
  src: url("altivo-regular.eot");
  src: url("altivo-regular.eot?#iefix") format("embedded-opentype"), url("altivo-regular.woff") format("woff"), url("altivo-regular.ttf") format("truetype"), url("altivo-regular.svg#altivo-regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "altivo";
  src: url("altivo-medium.eot");
  src: url("altivo-medium.eot?#iefix") format("embedded-opentype"), url("altivo-medium.woff") format("woff"), url("altivo-medium.ttf") format("truetype"), url("altivo-medium.svg#altivo-medium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "altivo";
  src: url("altivo-bold.eot");
  src: url("altivo-bold.eot?#iefix") format("embedded-opentype"), url("altivo-bold.woff") format("woff"), url("altivo-bold.ttf") format("truetype"), url("altivo-bold.svg#altivo-bold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "corsa";
  src: url("corsa-grotesk-regular.eot");
  src: url("corsa-grotesk-regular.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-regular.woff") format("woff"), url("corsa-grotesk-regular.ttf") format("truetype"), url("corsa-grotesk-regular.svg#corsa-grotesk-regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "corsa";
  src: url("corsa-grotesk-medium.eot");
  src: url("corsa-grotesk-medium.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-medium.woff") format("woff"), url("corsa-grotesk-medium.ttf") format("truetype"), url("corsa-grotesk-medium.svg#corsa-grotesk-medium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "corsa";
  src: url("corsa-grotesk-bold.eot");
  src: url("corsa-grotesk-bold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-bold.woff") format("woff"), url("corsa-grotesk-bold.ttf") format("truetype"), url("corsa-grotesk-bold.svg#corsa-grotesk-bold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "corsa";
  src: url("corsa-grotesk-xbold.eot");
  src: url("corsa-grotesk-xbold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-xbold.woff") format("woff"), url("corsa-grotesk-xbold.ttf") format("truetype"), url("corsa-grotesk-xbold.svg#corsa-grotesk-xbold") format("svg");
  font-weight: 800;
  font-style: normal;
}