How to embed font to all page with nuxt js

Question

I just embed google font to the global setting in nuxt.config.js

 link: [
      { rel: \'stylesheet\', href: \'https://fonts.googleapis.com/css?family=Roboto         


        

Answer 1

you can do these steps: 1__define your font in as a custom varriable in a seprated file in your assests directory,for example variables.scss, like this:

$body-font-family: Roboto;
@import '~vuetify/src/styles/styles.sass';

2__then in the nuxt.config.js,you should add a stylesheet link in the head, like this:

head: {
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
  ]
},

3__then it is neccessary to enable treeshaking in the vuetify and set your customvariables,like this:

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true
},