Mixin for font-face isn't printing styles when used

user_4329847 0
Viewed 340

I have the following folder structure:

enter image description here

style.scss looks like this:

@import "mixins.scss";
@import "theme/**.scss";

Everything from style.scss is compiled within theme.min.css.

In _mixin.scss, I have a mixin for font-face:

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.otf') format('otf'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.woff2') format('woff2'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}

@mixin lemonmilk-bold{
  @include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);
}

And in _typography.scss, I have the following:

h1{
  @include lemonmilk-bold;
}

However, the font styles do not apply on the front end?

I thought it was something to do with the folder path maybe (as all styles get compiled to theme.min.css). But, changing the paths did nothing for me too.

Unsure where I am going wrong?

font-face sass mixins css
2 Answers

The main problem seems to be that @font-face is not supposed to be put into a CSS selector. Instead, @font-face stands by itself, and you use it with font-family.

This is how it should be used:

@font-face{
    font-family: fishes;
    src: url(/path/to/file);
    font-weight: 400;
}

h1{
    font-family:fishes;
}

But, your code appears to be incorrectly compiling into this:

h1{
    @font-face{
        font-family: fishes;
        src: url(/path/to/file);
        font-weight: 400;
    }
}

Which is invalid CSS.

Instead, you should probably do something like this:

//Beginning of CSS file.
@include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);

...
...
...

h1{
    font-family:lemonmilk;
    font-weight:normal;
}

and delete the @mixin lemonmilk-bold.

user_52433090

Your problem may be more simple than you think. Font face declarations need to appear on the page before any other CSS selector.

Like this:

@font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

body{
  margin: 0;
}

/* more CSS code */

Not this:

/* Code before the font face declaration */
body{
  margin: 0;
}

@font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

/* more CSS code */
user_8183260
Related