Vuetify: overwriting font-family

[noorzaie]

There are many inline font-families and so it's not possible to overwrite them using sass variables.

[close-issue-app[bot]]

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. For general questions, please join the Discord chat room. You can also check reddit or stackoverflow. Thank you.

[ThomasKuhlmann]

@noorzaie Probably better to ask this in the discord channel. Anyway, here's how you change the font:

Add custom sass file as per the instructions in the docs:
https://vuetifyjs.com/en/customization/sass-variables

Then add this in your sass file

@import "~vuetify/src/styles/styles.sass";
@import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900&display=swap");
$body-font-family: "Maven Pro" !important;

And replace the font with whatever font you want.

[noorzaie]

This just changes global font family. But the problem I've faced is inline styles. You can see inline font-family in image I've attached. So overwriting $body-font-family won't work in this case.
The value of $body-font-family is "Roboto", sans-serif !default and is different from inline styles, So I think inline font-families are not using from the sass variable.

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/elements/_typography.sass#L42

[filipyoo]

Reopened this because I got the same issue, the font doesn't apply to headings (h1, h2...) tags... So when using typography with class like title (which is h6) the custom font doesn't get applied...
A comment in SO also stated it:
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify

[andrewsali]

I had to declare my custom font-family before importing the default vuetify style in my custom main.scss. That way vuetify properly picks up the custom definition:

$body-font-family: ...;

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

[filipyoo]

Thank you for your reply!
Unfortunately it still doesn't work for me...
I did the way you described, and in my nuxt.config.js I have:

  head: {
    ...
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Varela+Round'
      }
    ]
  },
  /*
   ** Global CSS
   */
  css: ['~/assets/scss/main.scss'],
  ...
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: ['~/assets/scss/variables.scss']
  },
  ...
  vuetify: {
    customVariables: ['~/assets/scss/variables.scss'],
    theme: {
    ...
      }
    }
  },

And in my ~/assets/scss/main.scss file:

$body-font-family: 'Varela Round';
$heading-font-family: 'Varela Round'; // With or without this line, it still doesn't work

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

[pimboden]

None of the solutions work:
I have nuxt.config with

 buildModules: [
    // https://github.com/nuxt-community/vuetify-module#readme
    '@nuxtjs/vuetify'
 ...
]
...
vuetify: {
customVariables: ['~/assets/scss/vuetifyvariables.scss'],
 theme: {
   dark: false
}
....

and in my ~/assets/scss/vuetifyvariables.scss I wrote:

 $body-font-family: 'FSAlbertWeb-Regular',Helvetica,sans-serif;
 @import "~vuetify/src/styles/styles.sass";

Still I see:

.v-application {
    font-family: "Roboto", sans-serif;
    line-height: 1.5;
}

[leasontou]

Has anyone solved this problem?

[pimboden]

No.. They "solved" it by closing the issue without a solution. I had to overwrite it by css using important!

[leasontou]

No.. They "solved" it by closing the issue without a solution. I had to overwrite it by css using important!

emmm... I think I will follow your steps.

[JosephSaw]

I had to declare my custom font-family before importing the default vuetify style in my custom main.scss. That way vuetify properly picks up the custom definition:

$body-font-family: ...;

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

In case anyone else is reading this, this definitely worked for me.

[pwnz22]

I also cant change the font family. I have this:

@import './fontface.scss';

$body-font-family: 'GT-Walsheim-Regular', sans-serif;
$heading-font-family: 'GT-Walsheim-Regular', sans-serif;

@import '~vuetify/src/styles/settings/_variables';

@each $heading, $style in $headings {
    $headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}

Anyone can help?

[alvaro-canepa]

Is there any working example of how to replace main fonts?

[imperatormk]

Worked for me!

nuxt.config.js

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  theme: {
    dark: false
  }
},

variables.scss

$body-font-family: Montserrat;

.v-application {
  .display-1,
  .display-2,
  .display-3,
  .display-4,
  .headline,
  .title,
  .subtitle-1,
  .subtitle-2,
  .body-1,
  .body-2,
  .caption,
  .overline {
    font-family: $body-font-family !important;
  }
}

[loomchild]

@filipyoo, @pimboden: Perhaps you are missing treeShake: true in nuxt.config.js file vuetify section?

I wrote a short article explaining the solution, there's also a complete code example at the end:
https://medium.com/untitled-factory/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

[indigoswann]

Re-open this, it's not fixed. It's literally impossible to override the default Roboto font.

[joaokrabbe]

Same here, trying everthing. Nothing work.

[joaokrabbe]

I find a workaround!

I tried to use custom variables, but the import import 'vuetify/dist/vuetify.min.css'; was overwriting my definitions.
So I appealed to css specificity, and setup my overwriting with css id, and it's beats the class overwrite from vuetify.min.css.

_If anyone needs, just create this file on ./src/sass/variables.scss:_

// @/sass/variables.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800&display=swap');

$body-font-family: 'Open Sans';

$typoOptions: display-4, display-3, display-2, display-1, headline, title, subtitle-1, subtitle-2, body-1, body-2, caption, overline;
#app {
  font-family: $body-font-family, sans-serif !important;
  @each $typoOption in $typoOptions {
    .#{$typoOption} {
      font-family: $body-font-family, sans-serif !important;
    }
  }
}

P.S.:

• I know that I no need custom variables to do that, but since that is already loading by vuetify-loader, seems comfortable to use that way until another solution appears.
• I have installed vuetify using vue cli 3, so the vuetify-loader will automatically bootstrap the file, already said that, rsrs.
• typoOptions is the classes that you want to replace, and if you set in #app like me, this will replace everything too.
• #app is the id from div used to mount Vue

So i forced this by css, is not ideal but... it that I have for now.
I Hope this help anyone else.

[BonBonSlick]

Salvation is easy peasy, do not use this crap.
if you need something, take a look and reverse engineer it.

[IOIIOOIO]

Thanks @joaokrabbe that worked for me.

This is a very strange problem though because overwriting $body-font-family works fine, but trying to overwrite $heading-font-family has no effect. It confuses me because when I look at the SASS code in Vuetify I see no reason why it wouldn't work as expected.

[IOIIOOIO]

I've found a solution on stackoverflow that works.

simply override the font-family in the $headings map:

variables.scss

$heading-font-family: 'YourCustomFontFamily';

$headings: (
    'h1': (
        'font-family': $heading-font-family,
    ),
    'h2': (
        'font-family': $heading-font-family,
    ),
    'h3': (
        'font-family': $heading-font-family,
    ),
    'h4': (
        'font-family': $heading-font-family,
    ),
    'h5': (
        'font-family': $heading-font-family,
    ),
    'h6': (
        'font-family': $heading-font-family,
    ),
);

[blackinitial]

like commented by @loomchild

read on documentation vuetify module

Provide a way to customize Vuetify SASS variables.
Only works with tree-shaking.

[AndrianD]

Worked for me!

nuxt.config.js

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  theme: {
    dark: false
  }
},

variables.scss

$body-font-family: Montserrat;

.v-application {
  .display-1,
  .display-2,
  .display-3,
  .display-4,
  .headline,
  .title,
  .subtitle-1,
  .subtitle-2,
  .body-1,
  .body-2,
  .caption,
  .overline {
    font-family: $body-font-family !important;
  }
}

Oh, yes! Thank you. This solution works for me

[mapkbalaji]

This worked for me without using NUXT
Thanks @imperatormk for helping out!

/src/sass/variables.scss

$body-font-family: 'Nunito', Helvetica, sans-serif;

.v-application {
  .display-1,
  .display-2,
  .display-3,
  .display-4,
  .headline,
  .title,
  .subtitle-1,
  .subtitle-2,
  .body-1,
  .body-2,
  .caption,
  .overline {
    font-family: $body-font-family !important;
  }
}
@import '~vuetify/src/styles/settings/_variables.scss';

index.html

<head>
      ....
    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
      ....
</head>

main.js

import './sass/variables.scss'

[EmadBustati]

While playing with beautify-with-vuetify tutorial. This problem happens when using npm instead of yarn as package manager

[jensvlierop]

I found something that worked

I followed the documentation over on the Vuetify website
https://vuetifyjs.com/en/customization/sass-variables/#example-variable-file

I'm using the CLI plugin and added the following to my src\scss\variables.scss file:
```
//all variable changes need to happen before @import
$body-font-family: 'Open Sans', 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';
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800&display=swap');

[siddhartharora02]

So vuetify provides a very simple solution.

In your src directory create a sass, scss, or styles directory and then create a file named variables.scss or variables.sass in it.

When you run yarn serve or npm run serve, vuetify will automatically hoist the global Vuetify variables to all of your sass/scss files.

Example - src/scss/variables.scss

Below code will change the default body font

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');
$body-font-family: 'Poppins', sans-serif;

You can change many more shit in there and can change webpack settings if above doesn't work for you directly - check this link

Hope it helps!

[tleeaf]

None of these solutions worked for me at first, but then I changed an import statement in vuetify.js and suddenly the font-family changes were successfully applied.

//vuetify.js
//changed from this
//import Vuetify from 'vuetify/lib';

//to this
import Vuetify from 'vuetify/lib/framework';

Hope that helps someone!

[IfnotFr]

So vuetify provides a very simple solution.

In your src directory create a sass, scss, or styles directory and then create a file named variables.scss or variables.sass in it.

When you run yarn serve or npm run serve, vuetify will automatically hoist the global Vuetify variables to all of your sass/scss files.

Example - src/scss/variables.scss

Below code will change the default body font

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');
$body-font-family: 'Poppins', sans-serif;

You can change many more shit in there and can change webpack settings if above doesn't work for you directly - check this link

Hope it helps!

This solution is the more elegant and is working well for me. Just note that you must restart yarn serve to take effect !

[herlambang]

This works for my case, Vuetify + Nuxt, change global font from Roboto to Open Sans.

Refer to this page: https://github.com/nuxt-community/vuetify-module#defaultassets

nuxt.config.js

    treeShake: true,
    defaultAssets: {
      font: {
        family: 'Open Sans' 
      }
    },

No need to add custom definition in variables.scss.
No multiple fonts css embed in page load.

[Albertbol]

This works for my case, Vuetify + Nuxt, change global font from Roboto to Open Sans.

Refer to this page: https://github.com/nuxt-community/vuetify-module#defaultassets

nuxt.config.js

    treeShake: true,
    defaultAssets: {
      font: {
        family: 'Open Sans' 
      }
    },

No need to add custom definition in variables.scss.
No multiple fonts css embed in page load.

If you want to use only specific font weights or add display swap for example, this solution worked perfectly for me:

 defaultAssets: {
      font: {
        family: ['Roboto:400,500,700&display=swap']
      }
    },

[loomchild]

Thanks for sharing the defaultAssets solution, it's great if we have the same font for body and headings! I have updated my short article to include it.

[kxhira]

This works for me with Nuxt.
It doesn't work without treeShake: true.

nuxt.config.js

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,

~/assets/variables.scss

$body-font-family: ...;

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

[mjzarrin]

For two days I followed all available instructions with no success.
Finally I found the problem is [email protected] which is incompatible with Vuetify.
degrade sass-loader to version 8 resolved the problem.

yarn remove sass-loader
yarn add [email protected] --dev

[christianlevesque]

For anyone using a pure Webpack solution and having trouble with this, you need to have vuetify-loader installed in your project and set up as a Webpack plugin.

// webpack.config.js

const {VuetifyLoaderPlugin} = require("vuetify-loader")

module.exports = {
  // ...
  plugins: [
    // ...
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin(),
    new CleanWebpackPlugin()
  ]
}

I don't know to what extent the order matters, but I put VuetifyLoaderPlugin after VueLoaderPlugin and immediately before CleanWebpackPlugin, and that is working fine for me. But I also got this working about 2 minutes ago, so YMMV.

This is the only addition necessary, other than more obvious parts of the docs. Your sass-loader needs to be configured with the proper data|prependData|additionalData option, but no additional importing needs to be done.

[farajist]

I managed to apply a custom font to headings by using the .text-{breakpoint}-{value} classes instead, where value is in (h1, h2 ... etc.) and breakpoint can be omitted.

See docs : Typography

[Siddharth-Ashri]

I had to declare my custom font-family before importing the default vuetify style in my custom main.scss. That way vuetify properly picks up the custom definition:

$body-font-family: ...;

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

In case anyone else is reading this, this definitely worked for me.

I have been trying to import .sass extension into the .scss file webpack crashes when trying to compile the files.