Sometimes, we want to change the default font in Vuetify.

In this article, we’ll look at how to change the default font in Vuetify.

How to change the default font in Vuetify?

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.

For instance, in main.scss we write

$font-family: "Ubuntu" 

.v-application {
  [class*="text-"] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

to set the font-family value to $font-family, which is set to 'Ubuntu'.

Now our Vuetify app will use Ubuntu as the default font.

Conclusion

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.