Problem with nuxt + vuestic + tailwind, can't change font

[lokize]

Vuestic-ui version: 1.9.8

Description

i cant change font of my application, when i use this config:

vuestic: {
    config: {
      // Config here
    },
    fonts: false,

    //css: ["typography", "reset"],
  },

in nuxt.config.ts my font still is sans-serif, i cant import and use another font in my application when i using Vuestic, if i disabled Vuestic the import of another font works good.

[m0ksem]

Have you tried to set --va-font-familly css variable to another font?

[lokize]

how to do that? i have a imported font in my default.css:

@font-face {
  font-family: Inter;
  src: url(~/assets/fonts/Inter-Regular.ttf);
}

body {
  font-family: Inter;
}

and imported this in nuxt.config:

  devtools: { enabled: true },
  css: ["~/assets/css/default.css", "~/assets/css/tailwind.css"],
  vuestic: {
    config: {
      // Config here
    },
    fonts: true,

    //css: ["typography", "reset"],
  },
  modules: [
    "nuxt-icon",
    "@nuxtjs/tailwindcss",
    "@vuestic/nuxt",
    //"@nuxtjs/sitemap",
    "@nuxtjs/seo",
  ],
});

if vuestic is disabled in nuxt config font imported worked well

[cybearz]

Yes, I have the same problem. Found what the issue is. Will make a PR soon.

[m0ksem]

how to do that? i have a imported font in my default.css:

@font-face {
  font-family: Inter;
  src: url(~/assets/fonts/Inter-Regular.ttf);
}

body {
  font-family: Inter;
}

and imported this in nuxt.config:

  devtools: { enabled: true },
  css: ["~/assets/css/default.css", "~/assets/css/tailwind.css"],
  vuestic: {
    config: {
      // Config here
    },
    fonts: true,

    //css: ["typography", "reset"],
  },
  modules: [
    "nuxt-icon",
    "@nuxtjs/tailwindcss",
    "@vuestic/nuxt",
    //"@nuxtjs/sitemap",
    "@nuxtjs/seo",
  ],
});

if vuestic is disabled in nuxt config font imported worked well

@lokize, Add to your default.css

body {
   --va-font-family: Inter;
}

Even if typography css module is disabled, components still will try to use Source Sans Pro if it is available. This is why you still need to override --va-font-family css variable.