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

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