Как в Gulp/SASS указать стиль шрифта к элементу @mixin @font-face?

Question

[webfactory]

Помогите начинающему пож-ста. Не могу понять я правильно делаю или нет. Сборка на GULP / Sass.
В style.scss

@mixin font($font_name, $file_name, $weight, $style) {
   @font-face {
   font-family: $font_name;
   font-display: swap;
   src: url("../fonts/#{$file_name}.woff") format("woff"), url("../fonts/#{$file_name}.woff2") format("woff2");
   font-weight: #{$weight};
   font-style: #{$style};
   }
}
@import "fonts";

В gulpfile.js выведена функция так, что когда в каталоге есть шрифты и запускаешь в терминале gulp, то в fonts.scss генирируется

@include font("Saira", "Saira-Bold", "700", "normal");
@include font("Saira", "Saira-Medium", "500", "normal");
@include font("Saira", "Saira-Regular", "400", "normal");
@include font("Saira", "Saira-SemiBold", "600", "normal");

А в style.css компилируется в

@font-face {
  font-family: "Saira";
  font-display: swap;
  src: url("../fonts/Saira-Bold.woff") format("woff"), url("../fonts/Saira-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Saira";
  font-display: swap;
  src: url("../fonts/Saira-Medium.woff") format("woff"), url("../fonts/Saira-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

и тд
...как потом подключать стили шрифта к сайту?...если шрифтов несколько? например для всего body один шрифт а для h1 и тд другой...прописывать как обычно font-family, weight и тд? спасибо

Comments

[Ankhena]

например для всего body один шрифт а для h1 и тд другой...прописывать как обычно font-family, weight и тд?

да, именно так

src: url("../fonts/Saira-Bold.woff") format("woff"), url("../fonts/Saira-Bold.woff2") format("woff2");

А вот это не так. А наоборот.
Сначала woff2, а потом woff.
Браузер берет тот шрифт который понимает и дальше не читает. А если не понимает, то пропускает и продолжает читать.

[700Hp]

Можешь показать код функции?