Skip to content

How to change typography

Vuetify uses webfontloader for adding fonts to your app. You can find webfontloader file in src/plugins/webfontloader.js. Update the font to your desired fonts and add CSS to update the font family.

ts
export async function loadFonts() {
  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')

  webFontLoader.load({
    google: {
       families: ['Roboto:100,300,400,500,700,900&display=swap'], 
       families: ['Montserrat:100,300,400,500,700,900&display=swap'], 
    },
  })
}

Next, just update the the font family via vuetify variables:

scss
@use "vuetify/styles" as * with (
  $body-font-family: "Montserrat",
);

It's done 🥂