Failed to load resource: Google Fonts

[AliRezaBeitari]

Module version 1.11.2

Describe the bug Set a custom font for Vuetify using defaultAssets like this:

defaultAssets: {
    font: {
        family: 'IRANSans',
    },
}

It still tries to load the font from Google Fonts. I have manually imported the IRANSans font using @font-face in my stylesheets but still I see a stylesheet tag in with href set to https://fonts.googleapis.com/css?family=IRANSans:100,300,400,500,700,900&display=swap. And because this font is a custom local font, it cannot find the font in Google Fonts. I need remove this stylesheet tag!

To Reproduce Check out the vuetify.options.js file: https://codesandbox.io/s/nuxtjs-vuetify-forked-1hbb4

Steps to reproduce the behavior: Set a custom font for Vuetify using defaultAssets like this:

defaultAssets: {
    font: {
        family: 'IRANSans',
    },
}

Expected behavior Don't put a stylesheet tag for Google Fonts

Screenshots

[larzon83]

defaultAssets.font is exactly there for loading google fonts. Use this to prevent loading of google fonts and also the dafoult Roboto font.

defaultAssets: {
  font: false
}

[AliRezaBeitari]

@larzon83 If I set font to false, then how can I use my own local font as the global font?

[larzon83]

One way: put your font-files under /static and create a fonts.css file. Like so:

@font-face {
  font-family: 'IRANSans';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: url('/iran-sans-100.woff2') format('woff2'), url('/iran-sans-100.woff') format('woff');
}

/* repeat for other font-weights */

Then import it into your nuxt.config.js under the css key:

export default {
  css: ['@/assets/fonts.css'],
}

And finally, set the font inside your vuetify variables.scss:

$body-font-family: 'IRANSans', sans-serif;

NOTE: you need to have treeShake: true (in your vuetify config in nuxt.config.js) for this to work!