_webfonts.scss

// example filename format:
// ../fonts/roboto/roboto_600-semibold-italic.ttf
// ../fonts/roboto/roboto_400-regular.ttf
// ../fonts/roboto/roboto_100-thin-italic.ttf
@mixin addExternalFont($name, $folder, $weight: 400, $style: normal) {
    $ver: 1;
    $weights: (
            100: thin,
            200: extralight,
            300: light,
            400: regular,
            500: medium,
            600: semibold,
            700: bold,
            800: extrabold,
            900: black
    );
    $filename: to_lower_case($folder);
    $weightName: regular;
    @if map-has-key($weights, $weight) {
        $weightName: map-get($weights, $weight);
        $filename: '#{$filename}_#{$weight}-#{$weightName}';

        @if $style == italic or $style == i {
            $filename: '#{$filename}-italic';
            $style: italic;
        } @else {
            $style: normal;
        }

        @font-face {
            font-family: $name;
            src: url('../fonts/#{$folder}/#{$filename}.eot');
            src: url('../fonts/#{$folder}/#{$filename}.eot?#iefix') format('embedded-opentype'),
            url('../fonts/#{$folder}/#{$filename}.woff2?#{$ver}') format('woff2'),
            url('../fonts/#{$folder}/#{$filename}.woff?#{$ver}') format('woff'),
            url('../fonts/#{$folder}/#{$filename}.ttf?#{$ver}') format('truetype');
            font-weight: $weight;
            font-style: $style;
        }
    }
}

@include addExternalFont('Roboto', 'roboto', 400);
@include addExternalFont('Roboto', 'roboto', 400, i);