Changing Default Fonts in Vuetify.js and Nuxt.js

A short tutorial about adapting typography using SCSS variables.

Photo by Jon Tyson on Unsplash

Only one font

vuetify: {
treeShake: true,
defaultAssets: {
font: {
family: 'Libre Baskerville'
}
}

Separate heading and body fonts

head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
]
},
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: false
},
$body-font-family: 'Libre Baskerville';
$heading-font-family: 'Oswald';
$font-size-root: 18px;
@import '~vuetify/src/styles/styles.sass';

Result

Expected result.
<v-container full-height>
<v-row>
<v-col cols="12">
<h1 class="display-1">
This is a Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa viverra, aliquet augue nec, rhoncus turpis. Nam vitae ultricies enim. Aenean non pellentesque mauris, quis porta ligula. Mauris vulputate urna sit amet arcu scelerisque finibus. Quisque non tempor massa, vitae venenatis urna. Aenean at eleifend ex. Integer sollicitudin ex turpis, et ullamcorper sapien pellentesque sit amet. Vestibulum a ultricies ante. Sed posuere non nunc at tempus. Curabitur malesuada scelerisque tortor, eget suscipit urna. Praesent quis tellus in tortor condimentum ultricies non ut odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</v-col>
</v-row>
</v-container>

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store