Change default font in vuetify is not working (vue-cli 3) [Vuetify 1.X]

Question

I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.

So far my attempts go like this:

• vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)

• vue add vuetify

• it creates a plugin dir: src/plugins, where it stores vuetify.js

• add a v-btn in the HelloWorld component just for knowing if the font had effect

• Then I should be able to import ../stylus/main.styl, where I have:

  @import '~vuetify/src/stylus/settings/_variables' $body-font-family = 'Open Sans', sans-serif; $heading-font-family = 'Montserrat', sans-serif; @import '~vuetify/src/stylus/main'

I even tried with @import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.

Error log: no errors, I just keep seing Roboto font in my material buttons

Any remarks?

Other attempts: I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.

Edit: the linked article from medium at the time didn't specify it was not scoped to a specific Vue version as of September 2019.

Answer 1

So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

Answer 2

EDIT:
It's possible that some styles are broken when importing styles from main.styl:
https://github.com/vuetifyjs/vuetify/issues/3583

---

Does everything load, do you get any errors?

It seems it should work, unless perhaps you have some typos somewhere, or incorrect paths?
For example stylus should be styles in your @require '~vuetify/src/stylus/main.styl'.

do I have to do also vue add stylus-loader?

It should already be added for you.

If you did not select specific CSS preprocessor (i.e. stylus) during vue-cli installation, then you need to add it manually
npm i -S stylus stylus-loader

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}

Answer 3

This is working for me using nuxt 2.15.8.

Add this to your nuxt.config.js

vuetify: {
    treeShake: true,
    defaultAssets: {
      font: {
        family: "Inter",
      },
      icons: "mdi",
    },
}

If you need different font weights you might have to import them manually in you CSS or as a in your HTML