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.

Cherian

Someone should tell Jacob to post code along with screenshots of the code (or no screenshots at all), lol. – Forge

lol I agree 100%, it's really annoying to rewrite code based on images. – Cherian

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

Cherian

The most easy way to do this! – Flammable

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

Forge

Hi @Traxo, well actually I even started a project from scratch with vue-cli 3 (even in different pcs, ubuntu 16 and 18), it's supper odd because if I had to add stylus-loader and other steps then there wouldn't be a point on using the plugin as stated on Vuetify's official page and go against what they say there, I've found related issues with no answers from other people. Actually no, stylus is in effect the name of that folder in vuetify's module, I can tweak what I need directly there but it's not recommended at all. – Cherian

@Cherian stylus-loader is probably in your package.json already. So no need to add it manually (if not then you need to add it, there is a step which asks you for css selectors when you use vue-cli, perhaps you don't get it with default option, perhaps describe exact steps). But do you get any errors? Did you include your main.styl file import './stylus/main.styl' (path depends where you are importing it)? – Forge

At the end it works when you don't follow [Vuetify guide with vue-cli 3 ](vuetifyjs.com/en/style/theme) that would be: manually installing stylus-loader with npm, going into webpack module and tweak it and basically defeating the purpose of the cli 3 plugin management. I need a way to use it via the cli3 w/o having to do that, I was hoping it was my fault but the documentation just doesn't work for that part. – Cherian

@Cherian ah, well I'll delete this answer then. I'm not sure which options you chose during install but default installations should provide stylus-loader for you (unless something changed recently, which I doubt). So try to provide all the steps in the answer. Cuz I'm not sure why you had issues with it. – Forge

will it work for you with the edited steps I wrote? From a new project, I mean. – Cherian

@Cherian better if you write it, you know exact steps, I might'd misunderstood something and I have not tested it myself anyway. I will delete this answer once I see that you've read this message i.e. you posted the answer (hopefully) :). – Forge

just came back to it for a couple of minutes and found the problem, although a new one arose and it's that heading & body font-family seem to only take what's in body-font-family and ignore the other one, Vuetify has this line under their _variables.styl file: $heading-font-family := $body-font-family, but it shouldn't be taking effect after the main.stlyl overwrite. – Cherian

@Cherian There are few issues with regards to stylus styles: github.com/vuetifyjs/vuetify/issues/3583 Not sure how it's all gonna be resolved in the future. – Forge

I see, that was a useful link to read, thanks! Maybe with the next version I hope, I heard they were migrating from stylus to sass in v2, I reported my problem for the vue-cli vuetify plugin, I mean I have a workaround but I would love to have everything I need to overwrite in one main.styl file and hope it doesn't mess with the rest of the app. – Cherian

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

Gradual

The question states clearly the use of vue-cli/vue, not Nuxt in any way, so the answer is not relevant to this question. – Cherian

amazing answer ,by the way feeling bad for Dil A cause he is still using vue instead of nuxt :)) – Outplay

My bad. Sorry I didn’t read the original question properly. – Gradual