Vuetify: [Feature Request] About changing default font of Vuetify

[kingdom84521]

Problem to solve

When using chinese in vuetify's tags, the default font: roboto, just can't properly suit to those chinese words, and would automatically change the font into a chinese font called "PMingLiU", which is the chrome browser's default font for chinese words. There are several ways to change default font which was found by some hackers online, but seems like there isn't a official way to change it.

Proposed solution

I have looked into the css code, and found that there is a "!important" at the place where defined the default font, which was cannot be override. Just looking for a method to override this part of code.

[melbahja]

You can add a class to v-app and apply font-family.
https://codepen.io/dev0x0/pen/eYYJgQK

[kingdom84521]

already add things like

• {
  font-family: "Font Name"
  }

but it didn't actually work because of "!important"

[kingdom84521]

OK, i found that the problem is actually came from vuetify's typography.
When using typography classes, the font-family will be lock at roboto and can't change to another.
i know that i can just add a css class to define a customize typography like the comment say above, but i still want to know if there is a way to change the default font family( and also i am not really sure if the "!important" keyword only works on typography classes. )

[kingdom84521]

Just found a way to use sass file to override the "body-font-family" variable, but still wondering if there can have a easier official method.

---

( Using vue-cli 3 )

1. Create a .sass file in your project folder, write down these code into the file:

@import '~vuetify/src/styles/styles.sass'
// If you need to import the font family from CDN then add a import line

$body-font-family: "YOUR FONT FAMILY NAME"
​
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline
​
%font-choice 
  font-family: $body-font-family, sans-serif !important
​
@mixin md-typography
  @each $typoOption in $typoOptions 
    .#{$typoOption} 
      @extend %font-choice
​
.v-application
  @extend %font-choice
  @include md-typography

1. Add a line at vuetify.js which locate at src/plugins like below:

    import Vuetify from 'vuetify/lib'
    import 'YOUR_SASS_FILE_PATH' // Add this line
    // You can use "@" to shorten the path, which represent the "src" folder.

1. Run the project then you will see the difference.

[johnleider]

There are instructions on how to do this on the documentation. https://vuetifyjs.com/customization/sass-variables

[kingdom84521]

that didn't work at all, already try it before

[roman-122]

I replaced with Google Font "Poppins" like below;

1. Replace font in index.html

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

1. Set font-family in App.vue

<style lang="scss" scoped>
  .v-application {
    font-family: 'Poppins', sans-serif;
  }
</style>

@johnleider Is my solution okay?

[acarlstein]

@Antonio-Collins regrettably your solution didn't work.

I added to the head tag of the index.html:

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

and to the App.vue:

<style lang="scss" scope>
  @import "./scss/_variables.scss"; 
  .v-application {
    font-family: 'Lato', sans-serif;
  }
  .font-white {
    color: $white;
  }
</style>

Zero luck. :(

[roman-122]

@acarlstein It was working on my side..
Could you please share the template in App.vue?

[jarvilito1234]

I have done something that doesn't need so much configuration like installing a ton of package.
if you dont have a global css, just make one then type this

• {
  font-family: "selawk", sans-serif !important;
  }

[roman-122]

UPDATE Jan/04/2020
https://vuetifyjs.com/en/customization/sass-variables/#example-variable-file

// src/sass/variables.scss

// Globals
$body-font-family: 'Work Sans', serif;