Change default font in vuetify

Question

I can\'t figure out how to change the default font in vuetify. I\'ve been looking for the right variable within ./node_modules/vuetify, but I can\'t locate it.

I\'d

Answer 1

How I achieved it: (Vuetify 2+)

1) Into your index.html, import your fonts.

2) Inside /src, create a styles directory and a file named variables.scss inside it

3) In that file, override some variables values:

// Globals
$body-font-family: 'MY_CUSTOM_FONT'; // Used on content
$heading-font-family: 'Literata';    // Used on helpers classes

Hope it helps someone.

References:
https://github.com/vuetifyjs/vuetify/issues/8169
https://vuetifyjs.com/en/customization/sass-variables#example-variable-file