Switch up the default font in your Nuxt 3 and Vuetify 3 project

Question

Switch up the default font in your Nuxt 3 and Vuetify 3 project

I've been doing a lot of searching on Google, but I can't seem to find the solution. It seems like the challenge might be that the Nuxt 3 + Vuetify 3 combination isn't widely used yet?

My current task is to implement a custom default font. I've attempted to do this through nuxt.config.ts in the same way I did with Nuxt 2.

vuetify: {
    customVariables: ["~/assets/variables.scss"],
    treeShake: true,
  },

However, it's not working as expected.

Right now, I'm using plugins/vuetify.ts to define the theme and colors. I believe the font should be set there, but I'm unsure how to do it.

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 functioning correctly, but I'm uncertain about how to replace the default fonts/styles. Has anyone encountered this issue and successfully resolved it?

typescript vue.js nuxt.js nuxtjs3 vuetifyjs3

Answer 1

Answer №1

After encountering the same issue, I managed to resolve it by manually importing some CSS in my nuxt.config.js

// nuxt.config.js
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', '@/assets/main.css'],
  build: {
    transpile: ['vuetify'],
  },
  ...
})

Additionally, make sure to add the following code 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');
}

Answer 2

After encountering the same issue, I managed to resolve it by manually importing some CSS in my nuxt.config.js

// nuxt.config.js
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', '@/assets/main.css'],
  build: {
    transpile: ['vuetify'],
  },
  ...
})

Additionally, make sure to add the following code 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');
}

Answer 3

Answer №2

To customize the font in Vuetify 3, you need to adjust the $body-font-family variable.
Firstly, make sure you have correctly set up Vuetify 3 and Nuxt 3 following the instructions in the official Vuetify documentation.

The majority of the relevant documentation is available at: SASS-variables

You will also require a Vuetify plugin in your Nuxt project:

/* plugins/vuetify.ts */
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import "vuetify/styles";

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
    // Additional Vuetify settings can be added here
  })

  nuxtApp.vueApp.use(vuetify)
})

In your nuxt.config.js, integrate this plugin like so:

/* nuxt.config.js */
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: ['@/assets/global.scss'],

  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
        vuetify({
          styles: { configFile: new URL('assets/settings.scss', import.meta.url).pathname }
        })
      ))
    }
  ],
  
  // Other Nuxt configuration details can be added here
})

You can specify a custom font in /assets/global.scss:

// /assets/global.scss
// Customize global scss settings
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

In the file assets/settings.scss, you can modify Vuetify SCSS variables such as:

// /assets/settings.scss
// Adjust specific Vuetify settings
@use 'vuetify/settings' with (
    $utilities: false,
    $button-height: 40px,
    $body-font-family: 'Open Sans'
);

If you explore /node_modules/vuetify for $body-font-family, you will discover other variables that can be tweaked to customize the Vuetify font.

Answer 4

To customize the font in Vuetify 3, you need to adjust the $body-font-family variable.
Firstly, make sure you have correctly set up Vuetify 3 and Nuxt 3 following the instructions in the official Vuetify documentation.

The majority of the relevant documentation is available at: SASS-variables

You will also require a Vuetify plugin in your Nuxt project:

/* plugins/vuetify.ts */
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import "vuetify/styles";

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
    // Additional Vuetify settings can be added here
  })

  nuxtApp.vueApp.use(vuetify)
})

In your nuxt.config.js, integrate this plugin like so:

/* nuxt.config.js */
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: ['@/assets/global.scss'],

  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
        vuetify({
          styles: { configFile: new URL('assets/settings.scss', import.meta.url).pathname }
        })
      ))
    }
  ],
  
  // Other Nuxt configuration details can be added here
})

You can specify a custom font in /assets/global.scss:

// /assets/global.scss
// Customize global scss settings
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

In the file assets/settings.scss, you can modify Vuetify SCSS variables such as:

// /assets/settings.scss
// Adjust specific Vuetify settings
@use 'vuetify/settings' with (
    $utilities: false,
    $button-height: 40px,
    $body-font-family: 'Open Sans'
);

If you explore /node_modules/vuetify for $body-font-family, you will discover other variables that can be tweaked to customize the Vuetify font.

Answer 5

Answer №3

In my setup, I'm using a combination of Nuxt3 (v3.1.1) and Vuetify3 (v3.1.3) to globally change the font for Vuetify and its utility classes like (.text-h3).

My recommendation is to first follow this tutorial to set up Vuetify + Nuxt and then utilize Treeshaking for Nuxt to dynamically import only the components you need. Your nuxt.config.js should resemble something like this:

import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
  ],
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        config.plugins.push(vuetify())
      );
    },
  ],
});

Afterwards, create a .scss file where you can customize Vuetify defaults:

// assets/vuetifyTheme.scss
$font: "arial", sans-serif;

@use 'vuetify' with (
  $body-font-family: $font,
);

Then, import vuetifyTheme.scss at the top of your plugins/vuetify.ts:

// plugins/vuetify.ts
import "@/assets/vuetifyTheme.scss";
import { createVuetify } from "vuetify";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
       ssr: true,
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Your app should now display 'arial' as the default font for typography.

You may also override variables defined in vuetify/packages/vuetify/src/styles/settings/_variables.scss in a similar manner.

Hope this helps :)

Answer 6

In my setup, I'm using a combination of Nuxt3 (v3.1.1) and Vuetify3 (v3.1.3) to globally change the font for Vuetify and its utility classes like (.text-h3).

My recommendation is to first follow this tutorial to set up Vuetify + Nuxt and then utilize Treeshaking for Nuxt to dynamically import only the components you need. Your nuxt.config.js should resemble something like this:

import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
  ],
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        config.plugins.push(vuetify())
      );
    },
  ],
});

Afterwards, create a .scss file where you can customize Vuetify defaults:

// assets/vuetifyTheme.scss
$font: "arial", sans-serif;

@use 'vuetify' with (
  $body-font-family: $font,
);

Then, import vuetifyTheme.scss at the top of your plugins/vuetify.ts:

// plugins/vuetify.ts
import "@/assets/vuetifyTheme.scss";
import { createVuetify } from "vuetify";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
       ssr: true,
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Your app should now display 'arial' as the default font for typography.

You may also override variables defined in vuetify/packages/vuetify/src/styles/settings/_variables.scss in a similar manner.

Hope this helps :)

Switch up the default font in your Nuxt 3 and Vuetify 3 project

Answer №1

Answer №2

Answer №3

Similar questions

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

The imported path is not found in Tsconfig

The use of `slot` attributes in Ionic has been deprecated and flagged by the eslint-plugin-vue

Best Practices for Structuring Front-End Data (such as Product Information) in Vue.js

Vue component input form not providing expected result

Navigating through various product categories in Angular's routing system

Eliminating event listeners in Nuxt/Vue application

What is the best way to trigger an event in VueJS?

Is it possible to export an imported merged namespace in Typescript?

How can I efficiently remove elements from the end of an array in Vue.js?

Creating a completely static website using Nuxt.js without any need for API requests: a foolproof guide

Typescript: Declaring object properties with interfaces

Encapsulating functions with multiple definitions in Typescript

Learn to implement data binding with multiple array inputs in Vue.js

Is it possible to set the state of my datepicker to a previous value only if the new one is determined to be invalid?

Angular 4 allows for dynamically applying the active class to a clicked button, enhancing interactivity

What is the best way to trigger an event using vue-chartjs?

What is the reason for receiving an error with one loop style while the other does not encounter any issues?

Create a constant object interface definition

VueJS efficiently displays various v-binds, including functions and data, on the DOM