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 ideally not make any changes in the module, but would rather override such variables from outside the module.

Answer 1

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; } 

Answer 2

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.