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