Change default font in vuetify

The easiest way would be to simply set the font-family on body. If you are using webpack and importing the Vuetify stylus entry, main.styl, you can simply overwrite the $font-family variable with whatever font you want.


Best way

Define (if you use google fonts)

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

For vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

In app.vue or a separate scss/css file imported directly into app.vue

For vuetify 1.5.x In your app.vue script add

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

For example, if you are using a google font, your script tag should look like

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

Update 2021

In your main.scss file,

$font-family:'Ubuntu'

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