How to link a Google font to my Nuxt files?-CodePudding

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?

CodePudding user response：

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.