Change default font in vuetify

Question

I can\'t figure out how to change the default font in vuetify. I\'ve been looking for the right variable within ./node_modules/vuetify, but I can\'t locate it.

I\'d

Answer 1

Best way

Define (if you use google fonts)

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

For vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

In app.vue or a separate scss/css file imported directly into app.vue

For vuetify 1.5.x In your app.vue script add

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

For example, if you are using a google font, your script tag should look like

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

Answer 2

Install your font via CDN/npm. Then just override this variable by adding this line in ./src/styles/variables.scss

//Change default font to 'Inter'
$body-font-family: "Inter" !important;

A short and simple approach.

Answer 3

What worked for me using Nuxt.js with Vuetify Module was simply setting the body font in variables.scss, like this:

$body-font-family: SofiaPro, Roboto;

All other fonts are derived from this one.

Default variables file ('~vuetify/src/styles/styles.sass') is imported automatically afterwards and ignores a variable if it was already set (thanks to !default). Therefore there's no need to change $heading-font-family and individual $headings anymore.

For this to work with Nuxt module, do not forget to set treeShake: true in nuxt.config.js file. If you are not using Nuxt.js, then probably you need to import the variables file after setting the body font.

Here's an example of my nuxt.config.js file fragment:

buildModules: [
  '@nuxtjs/vuetify'
],

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

Where viariables.scss contains the above font definition.

I wrote a short article explaining this subject, containing a complete code example: https://medium.com/untitled-factory/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

Answer 4

I cannot guarantee that this is "best practice". But considering that there is no documentation on how to do this properly I am going to tell you how I accomplished this.

I am using the Nuxt webpack template so my file structure may be a bit different than yours but the concept is the same.

I have a static assets folder. Within that folder I have a global css file. I downloaded the font I was using as a file and added it to my static directory as well. But you could put it pretty much anywhere.

Here is the code that I added to my global CSS file:

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

Then you just add it to you styling rules as you normally would

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

ect...

Remember to enter the correct format. If your file downloads as a .otf it is opentype. If it is .ttf it is truetype.

I have not yet figured out how to include a font from CDN. If I do figure that out I will let you know.

Answer 5

My solution in (latest) Nuxt:

nuxt.config:

head: {
.......
link: [
  {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
  {
    rel: 'stylesheet',
    href:'https://fonts.googleapis.com/css?family=Raleway:400|Roboto+Slab:200&display=swap'
  }
]
},

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

theme: {
  .....
  },
}
},

variables.scss

$body-font-family: Raleway, sans-serif;
$heading-font-family: Roboto Slab, serif;

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

Answer 6

This solution work on Vue-CLI>=3

First of all you must install sass-loader

npm install sass sass-loader fibers deepmerge -D

You should first create "sass" folder in the "src" directory, then create a "variables.scss" file in this directory.

Then write the below code in this file.

$ body-font-family: Your-FontName
@import '~vuetify/src/styles/settings/_variables.scss';

You need to restart your project now.