Change default font Nuxt 3 + Vuetify 3 project

Question

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?

Answer 1

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');
}