vue.js - Change default font in vuetify

ID : 131330

viewed : 6

Tags : vue.jsvuetify.jsvue.js

Top 5 Answer for vue.js - Change default font in vuetify

vote vote

97

Best way

Define (if you use google fonts)

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap'); @import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');  $body-font-family: 'Oxygen'; $title-font: 'Comfortaa'; 

For vuetify 2+

.v-application {    font-family: $body-font-family, sans-serif !important;     .title { // To pin point specific classes of some components        font-family: $title-font, sans-serif !important;     }  } 

In app.vue or a separate scss/css file imported directly into app.vue

For vuetify 1.5.x In your app.vue script add

.application {   font-family: "Font Family Name"; } .headline, .title, .subheading{      font-family: $body-font-family !important; } 

For example, if you are using a google font, your script tag should look like

<style lang="scss"> @import url("https://fonts.googleapis.com/css?family=Questrial");  .application {   font-family: "Questrial"; } </style> 

Update 2021

In your main.scss file,

$font-family:'Ubuntu'  .v-application {   [class*='text-'] {     color: #36405a;     font-family: $font-family, sans-serif !important;   }   font-family: $font-family, sans-serif !important; } 
vote vote

85

The easiest way would be to simply set the font-family on body. If you are using webpack and importing the Vuetify stylus entry, main.styl, you can simply overwrite the $font-family variable with whatever font you want.

vote vote

74

What worked for me using Nuxt.js with Vuetify Module was simply setting the body font in variables.scss, like this:

$body-font-family: SofiaPro, Roboto;

All other fonts are derived from this one.

Default variables file ('~vuetify/src/styles/styles.sass') is imported automatically afterwards and ignores a variable if it was already set (thanks to !default). Therefore there's no need to change $heading-font-family and individual $headings anymore.

For this to work with Nuxt module, do not forget to set treeShake: true in nuxt.config.js file. If you are not using Nuxt.js, then probably you need to import the variables file after setting the body font.

Here's an example of my nuxt.config.js file fragment:

buildModules: [   '@nuxtjs/vuetify' ],  vuetify: {   treeShake: true,   customVariables: ['~/assets/variables.scss'],   ... other Vuetify options } 

Where viariables.scss contains the above font definition.

I wrote a short article explaining this subject, containing a complete code example: https://medium.com/@jareklipski/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

vote vote

70

I have noticed that, at least in recent versions of Vuetify, you need to specify both $body-font-family and $heading-font-family to change the fonts of everything from Roboto to something else in your overrides (following these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS in 2.0 so there will be a new process at that point.

$body-font-family = 'Barlow Condensed', sans-serif $heading-font-family = 'Barlow Condensed', sans-serif $headings = {   h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },   h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },   h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },   h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },   h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },   h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },   subheading: { size: 16px, weight: 400 },   body-2: { size: 14px, weight: 500 },   body-1: { size: 14px, weight: 400 },   caption: { size: 12px, weight: 400 },   button: { size: 14px, weight: 500 } } 
vote vote

56

So vuetify provides a very simple solution.

In your src directory create a sass, scss, or styles directory and then create a file named variables.scss or variables.sass in it.

When you run yarn serve or npm run serve, vuetify will automatically hoist the global Vuetify variables to all of your sass/scss files.

Example - src/scss/variables.scss

Below code will change the default body font

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap'); $body-font-family: 'Poppins', sans-serif; 

You can change many more shit in there and can change webpack settings if above doesn't work for you directly - check this link

Hope it helps!

Top 3 video Explaining vue.js - Change default font in vuetify

Related QUESTION?