Демо магии scss-подключения шрифта из поста: https://sglazov.ru/notes/fonts-in-project/

input.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 replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

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

  @return $string;
}

@function slug($string) {
  @return to-lower-case(replace($string, ' ', '-'));
}




$global-font-path : '/assets/fonts/'; // где вообще все шрифты в проекте

// имя шрифтов и их начертания
$fonts: (
  "Alegreya Sans" : ( 300, normal, 500, bold ),
  "Fira Code"     : ( 100, normal, bold )
);

@mixin font-face($font, $weight) {

  // каждый стиль: обычный и курсив
  @each $style in (normal, italic) {

    $path : slug($font);

    // если курсив, то добавить суффикс
    $font-file: if( $style == italic, $weight + '-italic', $weight);

    // повторить этот блок
    @font-face {
      font-family: $font;
      font-display: swap; // это важно для отрисовки
      font-weight: $weight;
      font-style: $style;
      src:
        url('#{$global-font-path}#{$path}/#{$font-file}.woff2') format('woff2'),
        url('#{$global-font-path}#{$path}/#{$font-file}.woff') format('woff');
    }
  }
}

// для каждого шрифта и начертаний..
@each $font, $weight in $fonts {
  // при разном количестве указания начертаний меняется тип переменной в SCSS o_O
  // проверяем это и если > 1, list — проходим по всем в цикле...
  @if type-of($weight) == list {
    @each $weight in $weight {
      @include font-face($font, $weight);
    }
  // если =1, используем это значение
  } @else {
    @include font-face($font, $weight);
  }
}

output.css

@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: 300;
  font-style: normal;
  src: url("/assets/fonts/alegreya-sans/300.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/300.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: 300;
  font-style: italic;
  src: url("/assets/fonts/alegreya-sans/300-italic.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/300-italic.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url("/assets/fonts/alegreya-sans/normal.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/normal.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: normal;
  font-style: italic;
  src: url("/assets/fonts/alegreya-sans/normal-italic.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/normal-italic.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: 500;
  font-style: normal;
  src: url("/assets/fonts/alegreya-sans/500.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/500.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: 500;
  font-style: italic;
  src: url("/assets/fonts/alegreya-sans/500-italic.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/500-italic.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: bold;
  font-style: normal;
  src: url("/assets/fonts/alegreya-sans/bold.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/bold.woff") format("woff");
}
@font-face {
  font-family: "Alegreya Sans";
  font-display: swap;
  font-weight: bold;
  font-style: italic;
  src: url("/assets/fonts/alegreya-sans/bold-italic.woff2") format("woff2"), url("/assets/fonts/alegreya-sans/bold-italic.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: 100;
  font-style: normal;
  src: url("/assets/fonts/fira-code/100.woff2") format("woff2"), url("/assets/fonts/fira-code/100.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: 100;
  font-style: italic;
  src: url("/assets/fonts/fira-code/100-italic.woff2") format("woff2"), url("/assets/fonts/fira-code/100-italic.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: normal;
  font-style: normal;
  src: url("/assets/fonts/fira-code/normal.woff2") format("woff2"), url("/assets/fonts/fira-code/normal.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: normal;
  font-style: italic;
  src: url("/assets/fonts/fira-code/normal-italic.woff2") format("woff2"), url("/assets/fonts/fira-code/normal-italic.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: bold;
  font-style: normal;
  src: url("/assets/fonts/fira-code/bold.woff2") format("woff2"), url("/assets/fonts/fira-code/bold.woff") format("woff");
}
@font-face {
  font-family: "Fira Code";
  font-display: swap;
  font-weight: bold;
  font-style: italic;
  src: url("/assets/fonts/fira-code/bold-italic.woff2") format("woff2"), url("/assets/fonts/fira-code/bold-italic.woff") format("woff");
}