Appearance
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 🥂