Change headers default font on Vuetify

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
}