Change headers default font on Vuetify - vue.js

Question

I've just upgraded to Vuetify 2.0 and my fonts are totally broken.
I've managed to change the font on the project by:
.v-application {
font-family: 'Montserrat', sans-serif!important;
}
But the headings that have applied classes like .display-1, .display-2 are still taking the Vuetify default (Roboto) because it has an !important in the Vuetify default styles.
How could I change the font for the entire project, overriding Vuetify's default?

Answer 1

You can change the default font for a specific type of typography like h1 and h2 and specifically the font-family property in the following manner in a global css file for example:
$headings: (
'h1': (
'font-family': 'Calibri',
'size': 60px,
'line-height': 60px,
'weight': 400
),
'h2': (
'font': 'Ariel',
'size': 48px,
'line-height': 48px,
'weight': 400
),
)
And than you can give these utility classes in the Vuetify way like so class="text-h1" or class="text-h2"
You could do the same in Vuetify to override the following built in(and exposed via API for modifications) utility classes:
h3
h4
h5
h6
body-1
body-2
subtitle-1
subtitle-2
button
caption
overline
If you need any further utility classes, for example that are derived from your internal design system you can add them in that global scss/css file and I recommend doing so while keeping the Vuetify naming convention.
For example if you need a body-3 or subtitle-3 you could add them like so
.text-body-3 {
// your custom style
}
.text-subtitle-3 {
// your custom style
}

Answer 2

In Vuetify 2.x you can customize scss variables in your variables.scss file. You probably need to set the $body-font-family and $heading-font-family variables.
There are a lot of variables documented here and many changed around Vuetify 2.3.
An example:
$font-size-root: 18px;
$body-font-family: 'Roboto', sans-serif;
$heading-font-family: 'Libre Caslon Text', serif;
$btn-text-transform: none;
Additional information for overriding specific styles:
You can further override individual styles such as text-h1 by adding a $headings to the same file.
$headings: (
'h1': (
'size': 4.0rem,
'weight': 400,
'line-height': 4.444rem,
'letter-spacing': 1em,
'text-transform': false
)
)
The valid values you can customize are listed on the typography doc. Those currently include:
h1
h2
h3
h4
h5
h6
subtitle-1
subtitle-2
body-1
body-2
button
caption
overline
These all generate text-X classes. ex: text-body-2
Also its important to note that even if you override these styles it will not change the type settings for elements of the same name (like h1). Instead you need to apply that style with class="text-h1". This is easy to miss in the docs.
Right:
<h1 class="text-h1">my header</h1>
Wrong:
<h1>my header</h1>
Also if you're not yet on 2.3 the names are different. If you follow github issues there have been a lot of changes around typography leading to this current system.