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

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

Answer 2

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 }
}

Answer 3

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!

Answer 4

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

Answer 5

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

Answer 6

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