I have been Googling a lot but I can't seem to find the answer. I feel the problem often is that maybe no one uses the Nuxt 3 Vuetify 3 combination yet?
I'm trying to add a custom default font. I have tried it via nuxt.config.ts
the way I used to with Nuxt 2.
vuetify: {
customVariables: ["~/assets/variables.scss"],
treeShake: true,
},
But it doesn't work.
I am currently using plugins/vuetify.ts
to define the theme and colors. I feel it should be set in there. But I do not know how.
import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "@mdi/font/css/materialdesignicons.css";
const myTheme: ThemeDefinition = {
dark: false,
colors: {
primary: "#HEXHEX",
},
variables: {}
};
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: "myTheme",
themes: {
myTheme
}
},
});
nuxtApp.vueApp.use(vuetify);
});
The themes are working, but I don't know how to overwrite the default fonts/styles. Anyone dealt with the same issue and managed to fix it?
CodePudding user response:
I have solved same issue by manually importing some CSS in the nuxt.config.js
// nuxt.config.js
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass', '@/assets/main.css'],
build: {
transpile: ['vuetify'],
},
...
})
and in your CSS file
/* main.css */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./fonts/Roboto-Light.ttf') format('truetype');
}