Font-face mixin

_font-face.scss

// To see how it works, copy this code and paste on http://www.sassmeister.com/
//Font-face mixin
//Generate font src string
@function font-src-list($formats, $local, $name, $path, $weight, $type) {
    $string: unquote('') !default;
    $i: 1;
    @if $local {
        @each $item in $local {
            $string: $string + unquote('local("#{$item}"), ');
        }
    }
    @each $ext, $format in $formats {
        $comma: if(length($formats) == $i, '', ', ');
        @if $ext == eot {
            $ext: $ext + '?#iefix';
        } @else if $ext == svg {
            $ext: $ext + '#svgFontName';
        }
        $string: $string + url('#{$path + $name + $weight + $type + '.' + $ext}') format('#{$format}') + $comma;
        $i: $i+1;
    }
    @debug $string;
    @return $string;
}

// See variables file for map example
@mixin font-face($family) {
    $formats: map-get($family, formats);
    $name: map-get($family, name);
    $file: map-get($family, file);
    $path: map-get($family, path);
    @each $face in map-get($family, faces) {
        $weight: map-get($face, weight);
        $type: map-get($face, type);
        $type-sign: if($type == italic, 'i', '');
        @font-face {
            font-family: $name;
            src: font-src-list($formats, map-get($face, local), $file, $path, $weight, $type-sign );
            font-weight: $weight;
            font-style: $type;
        }
    }
}

// modules/_variables.scss
$font__formats: (
	//eot: embedded-opentype, // IE6-IE8
	woff2: woff2, // Super Modern Browsers
	woff: woff, // Pretty Modern Browsers
	//svg: svg, // Legacy iOS
	//otf: opentype, // Most of Browsers (i.e. prtial support)
	//ttf: truetype // Most of Browsers (i.e. prtial support)
);
$font__typo: (
    name: 'Roboto Slab', // Font family name
    file: 'robotoslab', // Font file name, spaces are forbidden!
    path: 'fonts/', // Path to fonts relatively to compiled css
    formats: $font__formats, // Default font formats
    typefaces: (
        (
            weight: 300,
            type: normal,
            local: 'Roboto Slab Light' 'RobotoSlab-Light'
        ),(
            weight: 400,
            type: normal,
            local: 'Roboto Slab' 'Roboto Slab Regular' 'RobotoSlab-Regular'
        ),(
            weight: 700,
            type: normal,
            local: 'Roboto Slab Bold' 'RobotoSlab-Bold'
        )
    )
);

// To see how it works, copy this code and paste on http://www.sassmeister.com/
//Font-face mixin
//Generate font src string
@function font-src-list($formats, $local, $name, $path, $weight, $type) {
    $string: unquote('') !default;
    $i: 1;
    @if $local {
        @each $item in $local {
            $string: $string + unquote('local("#{$item}"), ');
        }
    }
    @each $ext, $format in $formats {
        $comma: if(length($formats) == $i, '', ', ');
        @if $ext == eot {
            $ext: $ext + '?#iefix';
        } @else if $ext == svg {
            $ext: $ext + '#svgFontName';
        }
        $string: $string + url('#{$path + $name + $weight + $type + '.' + $ext}') format('#{$format}') + $comma;
        $i: $i+1;
    }
    @debug $string;
    @return $string;
}

// See variables file for map example
@mixin font-face($family) {
    $formats: map-get($family, formats);
    $name: map-get($family, name);
    $file: map-get($family, file);
    $path: map-get($family, path);
    @each $face in map-get($family, faces) {
        $weight: map-get($face, weight);
        $type: map-get($face, type);
        $type-sign: if($type == italic, 'i', '');
        @font-face {
            font-family: $name;
            src: font-src-list($formats, map-get($face, local), $file, $path, $weight, $type-sign );
            font-weight: $weight;
            font-style: $type;
        }
    }
}

$font__typo: (
    name: 'Roboto Slab', // Font family name
    file: 'robotoslab', // Font file name, spaces are forbidden!
    path: 'fonts/', // Path to fonts relatively to compiled css
    formats: $font__formats, // Default font formats
    faces: (
        (
            weight: 300,
            type: normal,
            local: 'Roboto Slab Light' 'RobotoSlab-Light'
        ),(
            weight: 400,
            type: normal,
            local: 'Roboto Slab' 'Roboto Slab Regular' 'RobotoSlab-Regular'
        ),(
            weight: 700,
            type: normal,
            local: 'Roboto Slab Bold' 'RobotoSlab-Bold'
        )
    )
);

// components/_typography.scss
@include font-face($font__typo);