can't use @font-face SCSS local folder

Question

I have two "ttf" Font files that I have to use with Sass - SCSS and I can't use it directly from the folder

My _mixin.scss file:

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: "Lato-Bold";
    src: url("../../css/fonts/Lato/Lato-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: bold;
  }
}

This is correct?

this give me an ERROR when compile..it's my first time using font-face and ttf files. This is a project, so I can't add other fonts, I have to use it like that, can you help me?

How can I use this mixin, how to include in my font-family in my CSS and/or Html?

I'm trying to write this in my _typography.scss file and this give an error":

@include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);

ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss) Module not found: Error: Can't resolve '../../css/fonts/Lato/Lato-Bold.ttf' in '/Users/****/Desktop/****/src/scss' @ ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)

Ps: I'm using webpack.config.js | webpack-dev-server and compiling sass with --watch

Thank you for your help!

what type of error did you get and why you can pass the perimeters in mixin even you use the static values — Hammad tariq
According to your url, it says your font directory contains a directory "Lada", which contains a font named "Lada-bolt", but your file structure does not show this folder. Is this a copy mistake when making your question? — Ferrybig
@Ferrybig oh that "Lado" was a mistake when writing here, in my project is okay, but I'll update that here as well — AFAF

Hammad tariq Hammad tariq · Accepted Answer · 2019-03-21T17:03:15

try this in your mixin

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-name;
    src: url(#{$font-path});
    font-weight: $font-weight;
    font-style: $font-style;
  }
}

can't use @font-face SCSS local folder

1 Answers