Categories
Vue Answers

How to change the default font in Vuetify?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *