Override Vuetify 2.0 sass variable $heading-font-family

Question

In Vuetify 2.0.0-beta.0 I try to override the default variable $heading-font-family. This isn't working. However I can override e.g. $body-font-family, $font-size-root or $btn-border-radius.

I've followed the documentation from https://next.vuetifyjs.com/en/framework/theme

My main.scss looks like this:

// main.scss

@import '~vuetify/src/styles/styles.sass';

// The variables I want to modify
$font-size-root: 16px;
$body-font-family: Arial, sans-serif;
$heading-font-family: 'Open Sans', sans-serif;
$btn-border-radius: 8px;

My .vue file has a template with this HTML:

// in my vue Template

...
<div class="hello">
  <h1 class="display-1">{{ msg }}</h1>
  <p>Lorem ipsum dolor sit amet...</p>
  <v-btn color="pink" dark>Click me</v-btn>
</div>
...

When I inspect the H1 in the console, I expect it to have a font family of 'Open Sans', sans-serif. Instead I see "Roboto", sans-serif. This was the default value of $body-font-family before it was overridden in my custom main.scss

As I said, the other overrides from my main.scss are working fine. What am I doing wrong here?

Answer 1

I've tried all the solutions presented here but nothing worked.

What did work was following this https://vuetifyjs.com/en/customization/sass-variables

create a directory scss in src (not /src/styles/scss/ or any other variant). And there place your new variables value.

// /src/scss/variables.scss

$body-font-family: 'Less';
$heading-font-family: $body-font-family;

// Required for modifying core defaults
@import '~vuetify/src/styles/styles.sass';

Answer 2

Problem is caused by !important on font-family for vuetify typography helper classes.
My solution was to achieve same level of css specificity in my variables.scss file, and because it is loaded after vuetify typography helper classes it will override them.

My variables.scss file:

//all variable changes need to happen before @import
$body-font-family: 'Source Sans Pro', sans-serif !important;
//specificity needs to be taken into consideration for some components
//because !important has been assigned to their css
//https://dev.to/emmabostian/css-specificity-1kca
html,
body,
.v-application {
  font-family: $body-font-family;
}
//added all typography helper classes because of css specificity override
//https://vuetifyjs.com/en/styles/typography#typography 
.v-application {
    .display-4,
    .display-3,
    .display-2,
    .display-1,
    .headline,
    .title,
    .subtitle-1,
    .subtitle-2,
    .body-1,
    .body-2,
    .caption,
    .overline
    {
        font-family: $body-font-family;
    }
}
@import '~vuetify/src/styles/settings/_variables.scss';

If this doesn't work for you, inspect the element which defaults to Roboto font, click on the font-family attribute and see which css classes cause that, then add those classes to css selectors in variables.scss file (eg. .v-application .title)

Answer 3

Hello after a while I harmonize all my fonts with the following.

// src/sass/main.scss
$my-font-family: "Raleway", sans-serif !default;


@import "~vuetify/src/styles/styles.sass";
$body-font-family: $my-font-family;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: $my-font-family;

//Rewrite all the headings
$headings: map-merge($headings, (
        'h1': map-merge(
                        map-get($headings, 'h1'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h2': map-merge(
                        map-get($headings, 'h2'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h3': map-merge(
                        map-get($headings, 'h3'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h4': map-merge(
                        map-get($headings, 'h4'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h5': map-merge(
                        map-get($headings, 'h5'),
                        ( 'font-family': $body-font-family )
        ),
        'h6': map-merge(
                        map-get($headings, 'h6'),
                        ( 'font-family': $body-font-family )
        ),
        'subtitle-1': map-merge(
                        map-get($headings, 'subtitle-1'),
                        ( 'font-family': $body-font-family)
        ),
        'subtitle-2': map-merge(
                        map-get($headings, 'subtitle-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-2': map-merge(
                        map-get($headings, 'body-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-1': map-merge(
                        map-get($headings, 'body-1'),
                        ( 'font-family': $body-font-family)
        ),
        overline: map-merge(
                        map-get($headings, 'overline'),
                        ( 'font-family': $body-font-family)
        ),
        caption: map-merge(
                        map-get($headings, 'caption'),
                        ( 'font-family': $body-font-family)
        )
));

don't forget to add the main.scss in your vue.config.js https://vuetifyjs.com/en/customization/sass-variables

Answer 4

I had the same issue with $body-font-family; what I was trying was:

$body-font-family : 'ArbitrayFont' !important;
@import '~vuetify/src/styles/styles.sass';

However, after a lot of struggle, I found that after changing the default vuetify sass variable I should assign the variable to the desired elements like this:

 $body-font-family : 'ArbitrayFont' !important;
 html,
body,
.v-application,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $body-font-family;
}

@import '~vuetify/src/styles/styles.sass';

Answer 5

From Vuetify 2.0 doc, you should put default variables above the initial style import statement

And note: sometimes it only works by adding !important Hope this will help you

// src/sass/main.scss

// Any changes to a default variable must be
// declared above the initial style import
$body-font-family: 'Source Sans Pro', cursive !important;

$heading-font-family: $body-font-family, cursive !important;

// Required for modifying core defaults
@import '~vuetify/src/styles/styles.sass';

Answer 6

$headings: map-merge(map_get($headings, h1), ( h1: ( font-family: $title-font) ));

In the documentation v2.0 said that, but is not working for me

Answer 7

Try put the variables you want to modify before importing the vuetify styles.sass. This should fix this issue.

// main.scss

// variables want to modify
$font-size-root: 16px;
$body-font-family: Arial, sans-serif;
$heading-font-family: 'Open Sans', sans-serif;
$btn-border-radius: 8px;

@import '~vuetify/src/styles/styles.sass';