Override Vuetify 2.0 SASS Variable $Heading-Font-Family

Override heading font Vuetify + Nuxt

Apply the font family name to the variables you'd like to style then install the font you want and import it from node_modules or import via URL.

assets/variables.scss

 $font-size-root: 16px;
    
    $heading-font-family: "Roboto", sans-serif;
    $body-font-family: "Roboto", sans-serif;
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: $heading-font-family;
    }
    
    @import "@fontsource/roboto/latin.css";
    @import "~vuetify/src/styles/styles.sass"; //this has to be last

Unable to override Vuetify 2.1 SASS variables

Set all top-level variables before importing Vuetify, so that Vuetify doesn't overwrite.

set these variables before Vuetify does

$font-size-root: 14px;
$body-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$heading-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 

Then, import _variables.style so that you can override the nested values:

@import '~vuetify/src/stylus/settings/_variables'

Now that the $material-dark hash exists, set the background

$material-dark.background = 'green'

Then, import the main.style so that the Vuetify CSS classes are created.

Using Scss Variable Overrides in Vue 3 with Vuetify 3 Beta Using Vue CLI

I just fought with this for a solid 2 hours and FINALLY figured it out. Stumbled upon your question and figured I'd throw you a bone, even if it is 3 months later.

The problem currently is that the Vuetify 3 docs for this are not up to date. I'm going to try my hand at updating the docs in a PR after this. The key missing piece is that vuetify-loader was used for Vuetify 2, but Vuetify 3 is using the new wepback-plugin-vuetify. I figured that out when I stumbled upon vuetify-loader's "next" branch (see the README).

Anyway, here's all you need for when you're using a Vue CLI installation.

vuetify.ts

import @/styles/variables.scss;
// the rest of your vuetify.ts file...

variables.scss

@use "vuetify/styles" with (
  $body-font-family: "Comic Sans"
);

Edit: Also, I just started having issues with including commas in my font family in that list after the "with," so I ended up doing the following. This may not be the best SASSy solution for this, but idk their syntax well enough to come up with something else atm:

variables.scss

$body-font-family: Inter, sans-serif;

@use "vuetify/styles" with (
  $body-font-family: $body-font-family
);

Hope this helps. Good luck.

How to change font-family in Vuetify?

Update

Vuetify declares the font on .v-application and unfortunately also declare the font as !important on .v-application .text-hN. I can suggest you some ideas to modify your font:

1. If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
   'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file

2. If you want to keep default text-h4: You can remove the text-h4 class and use your own class custom-header with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
   Something like:

.custom-header {
    font-size: 2.125rem !important; /* from .text-h4 */
    line-height: 2.5rem; /* from .text-h4 */
    letter-spacing: .0073529412em !important; /* from .text-h4 */
    font-weight: 400; /* from .text-h4 */
    font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}

---

Previous answer

Give your element another class:

<div class="text-h4 anotherClassForExample">Text family I want to change</div>

Override the font-family of this new class in your css.

---

I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.

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.

---

Related Topics