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

8
votes

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.

2
vuetify.jsvue-cli-3stylus-loader
Someone should tell Jacob to post code along with screenshots of the code (or no screenshots at all), lol. – Traxo
lol I agree 100%, it's really annoying to rewrite code based on images. – sab

2 Answers

8
votes

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

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