CODEWITHSUNDEEP
nuxt.jsvuetify.js
lorenzo
lorenzo

Reputation: 622

How to change default font in NuxtJS/Vuetify?

Just overwrite the $body-font-family like the documentation says doesn't work.

Upvotes: 0

Views: 1329

Answers (1)

lorenzo
lorenzo

Reputation: 622

In nuxt.config.js:

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

    ....

    font: {
      family: 'AnotherFont' 
    },
},

In assets/variables.scss:

// Overwrite the default variable
$body-font-family: 'AnotherFont', sans-serif !default;

If you want to include the Google Fonts locally for offline use:

Install the nuxt/google-fonts module: npm install --save-dev @nuxtjs/google-fonts

In nuxt.config.js:

buildModules: [
    '@nuxtjs/google-fonts'
    
    ...
],

...

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

    defaultAssets: false, // Disable the automatic load from online CDN

    ...
},

...

// Download the google fonts
googleFonts: {
   download: true,
   stylePath: 'css/fonts.css',

   families: {
     AnotherFont: true,
   }
}

In assets/variables.scss:

// Overwrite the default variable
$body-font-family: 'AnotherFont', sans-serif !default;

I won't link any documentaion page, because this part of the Nuxt documentation is ambiguous and misses several points.

IMPORTANT NOTES:

  • when you disable the loading from the CDN, you lose also the online mdi icons, so you'll need to include them offline too
  • if something doesn't work, delete the npm_modules/.cache/nuxt-google-fonts folder (the @nuxtjs/google-fonts module has some bugs)

Upvotes: 2

Related Questions