How to import at .woff2 font and use it in a sass setting?

I have a file _variables.scss which is part of a sass setup with gulp.

In this file, I have the ability to import a Google Font as follows:

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

I am trying now to replace this font with a custom import from a .woff2 file. I tried the following, but this seems not to work:

@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 !default;
$font-family-custom-sans-serif: "Gellix", sans-serif !default;
$font-family-base: $font-family-custom-sans-serif !default;

Solution

You need to write a separate @font-face for each font variant

In your case it should look like this:

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

And then check the browser console to see if the paths you specified are correct

For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face