2

Im new to SCSS and im trying to load a local font to my SCSS file.

This works perfectly fine in a CSS file but in a SCSS file it does not give anything, not even an error:

@font-face {
  font-family: "Cairo";
  font-weight: 400;
  font-style: normal;
  src: url(./assets/Fonts/Cairo/CairoBlock-Regular.ttf);
}

The css and scss files are both located in the same directory so the path should be same. What am I doing wrong?

kissu
  • 40,416
  • 14
  • 65
  • 133
Nicolas
  • 434
  • 1
  • 3
  • 13
  • What is that `../assets/https:/font...`? It's not a local import. And I'm not even sure that you can import a CDN directly like that. – kissu May 11 '22 at 13:27
  • 1
    Does this answer your question? [How to efficiently load google fonts in Nuxt](https://stackoverflow.com/questions/68165911/how-to-efficiently-load-google-fonts-in-nuxt) – kissu May 11 '22 at 13:33
  • I updated the question. I decided to try to load all fonts locally. – Nicolas May 11 '22 at 15:03
  • What do you see in the DOM (devtools)? It's not applied? Also, did you checked this one: https://stackoverflow.com/q/1567184/8816585 ? – kissu May 11 '22 at 15:12
  • It's not applied. I checked that but I'm using the other syntax. – Nicolas May 11 '22 at 15:26
  • Is there something fundamental I could be missing maybe? I have only installed sass globally but nothing else. – Nicolas May 11 '22 at 15:51
  • 1
    Oh, I was using this @nuxtjs/style-resources module in the nuxt config and I tried to set set all the scss files from styleResources: [] to the css: [] in nuxt config and everything starter working magically. – Nicolas May 11 '22 at 16:01

1 Answers1

1

If you want to have your fonts loaded properly, you need to have them linked to your page somehow at some point. Hence why putting your SCSS files into the css property is probably the way to go.

nuxt.config.js

export default {
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['put-your-files-here']
}

Otherwise, here is how to load some fonts properly with Nuxt.

kissu
  • 40,416
  • 14
  • 65
  • 133