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 🥂