enter image description here I created my custom mixin for working with fonts, I'm work with sass through my custom gulp template, and I have some problems with includes, I can't inject my fonts correctly into the browser

Browser say can't upload image, but it is not image.

_font-face.scss:
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) {

    font-family: $font-family, sans-serif;
    font-weight: $weight;
    font-style:  $style;
    src: url('#{$file-path}.ttf');
    src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), font-url('#{$file-path}.woff') format('woff'), font-url('#{$file-path}.ttf') format('truetype');
};

_fonts.scss(nesting this mixin)
@import "_mixins/font-face";

main.scss: 
@import "reset";
@import "colors";
@import "fonts";

/* Main styles */
h1,h2 {
 @include font-face('Bangers', '../fonts/BangersRegular/BangersRegular', 700);
}

Output CSS:
h1, h2 {
  font-family: "Bangers", sans-serif;
  font-weight: 700; 
  font-style: normal;
  src: url("../fonts/BangersRegular/BangersRegular.ttf"); }

I expect the everything will be fine, because in documentation I saw examples for mixins, and now I really don't understand what is wrong

0 Answers