@nuxt/vuetify override default font about vuetify-module HOT 8 CLOSED

This is how it worked for me:

1. Create a new stylus file in your assets/style folder, in my example font.styl
2. Insert following code into main.styl:
   $body-font-family = Helvetica, Arial, sans-serif // whatever font-family you want to use @import '~vuetify/src/stylus/main'
3. Don´t forget to add the created file to your nuxt.config.js
   module.exports = { css: ['~/assets/style/app.styl', '~/assets/style/font.styl']

from vuetify-module.

@erichodges
You can modify it with normal (s)css. Just overwrite the standard rules. To do this you have at least two possibilities.

1. Write your css rules into your component´s style tag
   <style scoped> .example { font-weight: 700; font-size: 2.5rem; } </style>
   Note: "scoped"is optional of course. It means the rules only apply on this specific component.
2. For general stylings like font-size of p and so on you can also create a global css file and include it in your project. To do this, create a new css file inside your assets/style directory and add it to your nuxt.config.js like this:
   module.exports = { css: ['~/assets/style/my-custom-styles.css']}

from vuetify-module.

Thanks @joostdecock

from vuetify-module.

I wrote in default.vue like below.

<style lang="scss">
.application{
  font-family: "xxx";
}
</style>

from vuetify-module.

How can I modify the font weight/size in a given paragraph or div etc. I'm using the nuxt/vuetify template.

from vuetify-module.

@kmarryo
Ok cool, thank you!

from vuetify-module.

Not sure why this is still open. The answer by @kmarryo is spot on. Thanks Mario! 👍

from vuetify-module.

@kmarryo

I tried to add the css on module export
but it was override by _reboot.scss.

from vuetify-module.