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

So vuetify provides a very simple solution.

In your src directory create a sass, scss, or styles directory and then create a file named variables.scss or variables.sass in it.

When you run yarn serve or npm run serve, vuetify will automatically hoist the global Vuetify variables to all of your sass/scss files.

Example - src/scss/variables.scss

Below code will change the default body font

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');
$body-font-family: 'Poppins', sans-serif;

You can change many more shit in there and can change webpack settings if above doesn't work for you directly - check this link

Hope it helps!