Change default font is not possible

[fahamidev]

Module version

//dependencies
"nuxt": "^2.14.6",
"nuxt-i18n": "^6.16.0",
"vazir-font": "^27.0.3"

//devDependencies
"@nuxtjs/vuetify": "^1.11.2",
"@nuxt/types": "^2.14.6",

Describe the bug The font did not change when I made the changes mentioned in the document. In other words, unfortunately, 'Roboto' font does not change to 'VAZIR' font.

Expected behavior It is expected that when the 'Vazir' font is introduced, all font variables in scss files will change from 'Roboto' to 'Vazir'

Screenshots

//nuxt.config.ts
//vazir-font is in the node_modules
css: ['vazir-font/dist/font-face.css'] 
vuetify: {
   defaultAssets: {
            font: {
                family: 'Vazir',
            },
   }
   customVariables: ['~/assets/variables.scss'],
   treeShake: true,
}

// variables.scss
$body-font-family: 'Vazir';
$headinsg-font-family: 'Vazir';
$font-size-root: 16px;

@import '~vuetify/src/styles/styles.sass';

Additional context

• I use typescript
• I tried to do all the solutions mentioned in the issues

CSB CSB template here

what's the solution? What is the best way to change the font?

[inoisy]

+1 clean project. Its a bug

[larzon83]

No, no bug. I talked with @fahamidev on discord. It didn't worked bc he had sass-loader v7 in his devDeps. Nuxt Vuetify module comes with v8 which had breaking changes compared to v7, therefor the variables.scss file wasn't appended. So, if you have sass-loader v7 in your devDeps, remove it. Also nuke your node_modules folder and your package-lock.json and do a npm install.

@fahamidev can you please close this issue?

[jonybekov]

@larzon83 I don't have any sass-loader in my package.json. But still it's not working

[larzon83]

@larzon83 I don't have any sass-loader in my package.json. But still it's not working

Then please paste your package.json here

[Solymani-Hossein]

This code works for me

// dependencies

"nuxt": "^2.15.8",
"vazir-font": "^30.1.0",
"vuetify": "^2.6.1",

// nuxtconfig

css: [
        'vazir-font/dist/font-face.css',
        'vazir-font/dist/Farsi-Digits/font-face-FD.css', // for persian digits
],

// vuetify config

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    rtl:true,
    defaultAssets: {
      font: {
        family: 'Vazir FD', // for persian digits
      },
    },
  },

[PipocaZalas]

I am suffering the same bug, any change in variables.scss or defaultAssets does not have effect. Just in case this is my package.json:

{
    "version": "1.0.0",
    "private": true,
    "scripts": {
      "dev": "nuxt",
      "build": "nuxt build",
      "start": "nuxt start",
      "generate": "nuxt generate",
      "lint:prettier": "prettier --check .",
      "lint": "yarn lint:prettier",
      "lintfix": "prettier --write --list-different ."
    },
    "dependencies": {
      "@nuxtjs/auth": "^4.9.1",
      "@nuxtjs/axios": "^5.13.6",
      "@nuxtjs/toast": "^3.3.1",
      "core-js": "^3.25.3",
      "lodash.debounce": "^4.0.8",
      "nuxt": "^2.15.8",
      "nuxt-property-decorator": "^2.9.1",
      "vue": "^2.7.10",
      "vue-server-renderer": "^2.7.10",
      "vue-template-compiler": "^2.7.10",
      "vuetify": "^2.6.10"
    },
    "devDependencies": {
      "@nuxt/types": "^2.15.8",
      "@nuxt/typescript-build": "^2.1.0",
      "@nuxtjs/google-fonts": "^3.0.0",
      "@nuxtjs/tailwindcss": "^6.4.1",
      "@nuxtjs/vuetify": "^1.12.3",
      "@types/lodash.debounce": "^4.0.7",
      "@types/nuxtjs__auth": "^4.8.8",
      "eslint-config-prettier": "^8.5.0",
      "prettier": "^2.7.1"
    }
  }