webfactory
@webfactory

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

Помогите начинающему пож-ста. Не могу понять я правильно делаю или нет. Сборка на 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 и тд? спасибо
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы