Shortcut mixin for referencing custom webfonts via @font-face. Includes

font-face-mixin.scss

// @font-face shortcut - requires replace-str function
// @param {String} $name:       Name of font
// @param {String} $font-path:  Path to font files
// @param {String} $filename:   Manipulated string of $name
//
// eg:
//
// @include webfont('Webfont Bold');
// @include webfont('Webfont Regular');
//=================================================================
@mixin webfont($name) {

    $font-path: "../fonts";
    $filename: str-replace($name, ' ', '-');

    @font-face {
        font-family: $name;
        // src: url('#{$font-path}/#{$filename}.woff2') format('woff2'),
        //      url('#{$font-path}/#{$filename}.woff') format('woff'),
        //      url('#{$font-path}/#{$filename}.ttf') format('truetype');
        src: url('#{$font-path}/#{$filename}.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

}

str-replace.scss

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {

  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;

}