Блог

Главная - Вопросы по программированию - Как импортировать шрифт .woff2 и использовать его в настройках sass?

Как импортировать шрифт .woff2 и использовать его в настройках sass?

#css #sass #fonts #gulp #font-face

Вопрос:

У меня есть файл _variables.scss , который является частью настройки sass с gulp.

В этом файле у меня есть возможность импортировать шрифт Google следующим образом:

 $font: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" !defau<
$font-family-custom-sans-serif: "Nunito", sans-serif !defau<
$font-family-base: $font-family-custom-sans-serif !defau<

Сейчас я пытаюсь заменить этот шрифт пользовательским импортом из .woff2 файла. Я попробовал следующее, но это, похоже, не работает:

 @font-face {
  font-family: 'Gellix';
  src:  url("../../assets/img/brand/Gellix-Bold.woff2") format('woff2'),
        url("../../assets/img/brand/Gellix-Regular.woff2") format('woff2')
}

$font: "Gellix", sans-serif !defau<
$font-family-custom-sans-serif: "Gellix", sans-serif !defau<
$font-family-base: $font-family-custom-sans-serif !defau<

Ответ №1:

Вам нужно написать отдельное @font-лицо для каждого варианта шрифта

В вашем случае это должно выглядеть так:

 @font-face {
  font-family: 'Gellix';
  font-weight: 400;
  font-style: normal;
  src: url("../../assets/img/brand/Gellix-Regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Gellix';
  font-weight: 700;
  font-style: normal;
  src: url("../../assets/img/brand/Gellix-Bold.woff2") format('woff2');
}

А затем проверьте консоль браузера, чтобы убедиться, что указанные вами пути верны

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Комментарии:

1. Я пробовал это, но теперь у меня есть то, что не компилируется, когда я запускаю сборку gulp. Я в основном застреваю на одном из этапов. О чем это может свидетельствовать?

2. Я добавил его за пределами встроенного gulp, отдельный импорт css, не очень хорошо, но он работает

Метки: