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 ideally not make any changes in the module, but would rather override such variables from outside the module.

Youngstown

Commenting on my own question 4.5 years later: I'm surprised by how active this question still is, continuing to receive upvotes and answers. I'm glad my question helps people out, but I'm perplexed why this is not addressed in a prominent place in vuetify's documentation. – Youngstown

Answer 1

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.

Lomasi

Thanks. This pointed me in the right direction. I found the name of the variable I needed to override is $body-font-family. – Youngstown

Truly wonderful work with vuetify, by the way. I'm loving how easily and quickly I can get an attractive and functional user interface up and running. Using pug/jade makes it even more fun. I've started to support on Patreon as well. Hope it continues to get better. – Youngstown

All available variables that can be changed can be found here: github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/… – Clearcut

Just to update @Clearcut 's link, it's github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/… as of November 2018 – Bailes

I found this article to be helpful too which is based on similar idea: medium.com/@jacobedawson/… – Calenture

Just to update @Bailes 's link it's github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/… – Weathered

Answer 2

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>

Update 2021

In your main.scss file,

$font-family:'Ubuntu';

.v-application {
  [class*='text-'] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

Lyonnesse

I am using vuetify 2.x, i used recommended method, does not work on .headline? – Fairly

That's because those classes often have a different font defined (A display font which will make it look a bit different). I have updated the answer to reference them as well. – Lyonnesse

@RaviAnand .headline was deprecated in 2.x – Lysozyme

It works great until you specify class="text-h4" (or any other header number) to any element. – Kingsbury

Lol, that is just the point this answer fixes @yaya .. For vuetify 3 try adding .v-application, .v-overlay-container instead of .v-application to be sure to cover the menu's that are teleported to the body 👌 – Tarratarradiddle

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/@jareklipski/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

Densitometer

I tried, but nothing came of it. Is there an example of nuxt.confing? I am using the latest @nuxtjs/vuetify – Taproot

@PavelLevin I updated the description adding a relevant nuxt.config.js fragment. Let me know if it works for you and if not, please share your configuration. – Densitometer

When adding @nuxtjs/style-resources, node-sass and sass-loader, treeShake stops working. This is strange. github.com/pl-ekleft/nuxt-vuetify-font – Taproot

Strange. Unfortunately I can't help you since I am not using these particular libraries. I suggest to debug, reach out to their authors or to Vuetify author. – Densitometer

Problem in node-sass and sass-loader. Conflicts with vuetify. This is already in the nuxt :) – Taproot

Answer 4

I have noticed that, at least in recent versions of Vuetify, you need to specify both $body-font-family and $heading-font-family to change the fonts of everything from Roboto to something else in your overrides (following these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS in 2.0 so there will be a new process at that point.

$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}

Olympia

I want to have a different font for headings. I've done what you recommend, but no matter what I try, it doesn't seem to want to override $heading-font-family. All of my headings still have whatever font is set for $body-font-family. – Intact

Figured it out. Oddly, the font-family is not applied to h* elements unless you apply one of the heading classes, e.g. .headline or .display-1. This is not intuitive. – Intact

Answer 5

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 a lot more stuff in there and can change webpack settings if above doesn't work for you directly - check this link

Hope it helps!

Vasectomy

You should not import font in the variables.scss file. Because if you import the font in variables.scss file it will import every time on the time of compilation and the system will get very slow. Instead of importing it in the variables.scss file you just simply import the font in index.html file and add this part $body-font-family: 'Poppins', sans-serif; in the variables.scss file. – Pucida

Yup, that makes sense – Vasectomy

Answer 6

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.

Percentage

This is how I first solved it (I'm also using Nuxt). But I've now instead overridden the $body-font-family variable in the main.styl file. – Youngstown

You can use a font from CDN in the exact same way. Just point your src: url() to the font's CDN location. See here: fonts.googleapis.com/css?family=Racing+Sans+One – Youngstown

Answer 7

For Laravel Vuetify users, this all you need: Update your webpack.min.js file to look like:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

Your main.styl should be located in the path: resources\stylus\main.styl Your main.styl file should look like this:

@import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");

$body-font-family = 'Literata', serif
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'

To prevent Vuetify from writing inline styles that could override your main.css, do:

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

And finally, ensure stylus-loader is setup already, if not run in command line:

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

You can also npm install material-design-icons-iconfont.

npm install material-design-icons-iconfont --save

Revengeful

Answer 8

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.

Neural

Answer 9

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.

Passade

Answer 10

For vue 3 with vite and vuetify 3.0.6 generated by yarn create vuetify

based on @arora answer and official docs

1. Run npm install -D sass
2. In src/plugins/vuetify.js replace import 'vuetify/styles with import '../assets/main.scss' as stated here
3. Create main.scss file in assets folder as stated

@use 'vuetify' with (
  $utilities: false,
  $color-pack: false,
  $body-font-family: 'Assistant'
 );

4. I had to set utilities: yes to resolve some style issues (Do not use true).

Kingsbury

also had to use "utililties: yes", otherwise everything was breaking on the page. Thanks for the info on how to do it properly – Engstrom

This is the best answer for vuetify 3. You do not need to add $utilities and $color-pack options though, they are unrelated and should only be changed if you want to disable that functionality. – Aetna

Answer 11

If you are using Vuetify 2+, the process will be very similar to jeffbaumes's answer but using Sass instead of Stylus

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

$body-font-family: 'My Custom Font', cursive;

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

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

Or you can change the fonts of some heading styles and not others like this:

$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));

Premium

not working for me =( @each $heading, $style in $headings { ^ Undefined variable. – Deferment

Make sure to import the original Vuetify sass file at the top of src/sass/main.scss, like this: @import '~vuetify/src/styles/styles.sass'; – Premium

Answer 12

Unfortunately, @alice-mx answer didn't work for me (couldn't import from node_modules).

This is how I solved this problem in my code (using Vuetify 2):

---

After downloading the wanted .woff2 file and put it in src/assets/fonts, I added this code to my App.vue file (or whichever main vue file you set in your project):

// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify

%font-choice {
  font-family: "Noto Sans", sans-serif !important;
}

@mixin md-typography {
@each $typoOption in $typoOptions {
  .#{$typoOption} {
    @extend %font-choice;
  }
}

.v-application { // This is where we'll add all the md-typography classes
  font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

// add font-face because in this case Noto-Sans is taken from Google fonts
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"),
    url("~@/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>

I hope this will help!

This answer helped me to form the .scss code

Hyo

'@Tzahi Leh' i have followed your suggestion, but i see partially changed custom fonts. Can you please help me what am i missing? I have created a new post here. – Thirza

@mmar, did you find a solution? – Hyo

'@Tzahi Leh' No, i couldn't. Still i see partially changed theme. – Thirza

Answer 13

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

Calipee

Answer 14

I tried everything nothing was working in my case, but the below solution will definitely work though not the best solution

Add the below scss in your variables.scss

$body-font-family: "Open Sans",sans-serif;

.v-application {
  .text-h1,
  .text-h2,
  .text-h3,
  .text-h4,
  .text-h5,
  .text-h6,
  .text-headline,
  .text-title,
  .text-subtitle-1,
  .text-subtitle-2,
  .text-body-1,
  .text-body-2,
  .text-button,
  .text-caption,
  .text-overline {
    font-family: $body-font-family !important;
  }
}

Barometrograph

Answer 15

I'm using webpack and the only way I could make it work was:

// webpack.config.js

...
{
  test: /\.sass$/,
  use: [
    {
      loader: 'sass-loader',
      // Vuetify
      // Requires sass-loader@^9.0.0
      options: {
        implementation: sass,
        sassOptions: { fiber: fibers },
        additionalData: "@import '~/src/styles/variables.scss'",
      }
    }
  ]
}
...

// src/styles/variables.scss

@import "~vuetify/src/styles/settings/_variables.scss";

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
$body-font-family: 'Fredoka One', cursive;
$heading-font-family: $body-font-family;
$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,
    ),
);

Dyaus

Answer 16

Vuetify v2.4.11

Vue v2.6.12

1. To configure a custom font in Vuetify you need to include this CSS in your App.vue component.

<style lang="scss">
  @import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
  $font-family: 'New Tegomin', serif;
  .my-application {
    .headline,
    [class*='display-'],
    [class*='text-'] {
      color: #36405a;
      font-family: $font-family, sans-serif !important;
    }
    font-family: $font-family, sans-serif !important;
  }
</style>

2. Put a specific class in your node, something like that:

<v-app class="my-application">

This second point is important because all the font styles from Vuetify have !important and if you want to overwrite, you need to put an extra class...

I hope that this tip helps everyone!

Ehrlich

Answer 17

How I achieved it: (Vuetify 2+)

1) Into your index.html, import your fonts.

<link rel="stylesheet" href="<%= BASE_URL %>fonts/<MY_CUSTOM_FONT>/fontface.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Literata:100,300,400,500,700,900">

2) Inside /src, create a styles directory and a file named variables.scss inside it

3) In that file, override some variables values:

// Globals
$body-font-family: 'MY_CUSTOM_FONT'; // Used on content
$heading-font-family: 'Literata';    // Used on helpers classes

Hope it helps someone.

References:
https://github.com/vuetifyjs/vuetify/issues/8169
https://vuetifyjs.com/en/customization/sass-variables#example-variable-file

Elastance

Answer 18

it is a late reply but , You can add in common scss/sass/less file (which is called in App.vue or you main App file) it will implement it all over the application

.body,
.v-application{
    font-family: 'Antic', sans-serif;
}

Nicholas

Answer 19

I've run into the same problem in February 2023. This is an answer that works specifically on Vuetify 3 inside Nuxt 3. Here is a very simple way:

1. Go to get the source of your fonts. eg. Google font.
2. Input those fonts link in your nuxt.config:

 head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://your-font-source.com'
        },
      ]
 },

3. Apply the font-family to the html selector inside one of the Vue Components as a none scoped style:

<style>
  html {
    font-family: 'Your font name';
  }
</style>

If there's no override font specifically set in the components this font will be used throughout the app.

Excavator

Answer 20

There is a much easier and proper way than all of the methods above. Add

treeShake: true,
defaultAssets: {
  font: {
    family: 'Poppins'
  }
}

to the vuetify object in nuxt.config.js. This should properly enable your font family throughout the application.(see defaultAssets documentation for more details and note that the treeShake option is required)

Callao

Important: This solution requires a nuxt community package "vuetify-module" to work – Sorption

Answer 21

Extra helpful thing:

• when changing font from Roboto to any other font, by default vuetify will still import the cdn Roboto fonts file (url) in the "head" tag. To avoid that extra thing use the "defaultAssets: false" option under vuetify settings.

EDITED
That thing only works within NUXTJS, thanks to @nlavr for pointing it out

Sensory

In Vuetify there is no option 'defaultAssets: false', at least at 2.5 version. – Argol

Answer 22

If you're encountering the same issue but aren't using Nuxt, and instead are using Vuetify alone, you can try the following steps:

In your vue.config.js file, add the following code:

css: {

    loaderOptions: {

      sass: {

        additionalData: `@import "@/assets/main.scss"`

      }

    }

  },

In your main.scss file, add the following line:

$body-font-family: 'Montserrat', sans-serif !default;

Finally, in your index.html file, include the following link:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700,900&display=swap">

that works for me!

Preceding

Answer 23

TLDR:

1. Copy the font file to your project.
2. Register the font with your project so it can be used.
3. Configure Vuetify to use the font as its default.

Step 1: Copy the font file to your project

I copied the font file to this path:

/my-app/frontend/src/assets/fonts/<font-name-goes-here>.<file-extension>

Step 2: Register the font with your project so it can be used

The second step is to register the font with your Vue app so that you can use it at all.

I added a @font-face rule to a fonts.css file:

/my-app/frontend/src/styles/fonts.css

@font-face {
    font-family: '<font-name-goes-here>';
    src: url('../assets/fonts/<font-name-goes-here>.<file-extension>') format('<font-type>');
}

---

I then registered the font.css file in my main.ts file:

/my-app/frontend/src/main.ts

(...)
// Styles
import '@/styles/fonts.css';
(...)

Step 3: Configure Vuetify to use the font as its default

I set the $body-font-family Vuetify variable to be my new font in a settings.scss file:

/my-app/frontend/src/styles/settings.scss

@use 'vuetify/settings' with (
  (...)
  $body-font-family: '<font-name-goes-here>',
);

---

...and I have that settings.scss file registered in my vite.config.js file:

/my-app/frontend/vite.config.js

export default defineConfig({
  plugins: [
    (...)
    vuetify({
      (...)
      styles: {
        configFile: 'src/styles/settings.scss',
      },
    }),
  ],
(...)

---

Useful links:

• https://vuetifyjs.com/en/features/sass-variables/#basic-usage

Hyaloplasm