How to specify font style for @mixin @font-face element in Gulp/SASS?

Question

Sass

Please help a beginner. I can't figure out if I'm doing the right thing or not. Build on GULP / Sass.
In 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";

In gulpfile.js, a function is derived so that when there are fonts in the directory and you run gulp in the terminal, then fonts.scss is generated

@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");

And in style.css it compiles to

@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;
}

and so on
... how then to connect font styles to the site? ... if there are several fonts? for example, for the entire body one font and for h1 and so on another ... prescribe as usual font-family, weight and so on? Thank you