Vuetify-module: @nuxt/vuetify override default font

[nzxt]

I found that i need to change Vuetifye's $body-font-family variable, but i can't do this with nuxt.config.js in 'vuetify: {}' section.
Is it possible or what the best way to do it, cause vuetify.css is loading before others?
Thanks!

_{This question is available on Nuxt.js community (#c104)}

[kmarryo]

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

[erichodges]

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

[kmarryo]

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

[erichodges]

@kmarryo
Ok cool, thank you!

[joostdecock]

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

[anteriovieira]

Thanks @joostdecock

[gomezmark]

@kmarryo

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

[mk-tool]

I wrote in default.vue like below.

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