Changing Default Fonts in Vuetify.js and Nuxt.js

A short tutorial about adapting typography using SCSS variables.

Jarek Lipski
Feb 10 · 3 min read
Photo by Jon Tyson on Unsplash

Vuetify.js is a Material Design component framework that can be easily customized. Apart from color theming, it allows you to change it’s internal variables that control how the CSS stylesheet will be generated. This way you can change the default fonts.

In this example we will be using Nuxt.js — a meta-framework for Vue.js. I have chosen two fonts: Libre Baskerville for body text and Oswald for headers. For simplicity we will retrieve these fonts from Google Fonts service, but you can also opt for self-hosted versions via Typesfaces project (recommended!).

TL;DR — go straight to the final code:


First of all, in order to make new fonts available for use in your application, you need to add a stylesheet link in nuxt.config.js file, head section:

head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
]
},

Next, you need to enable treeshaking in the vuetify section, as mentioned in the Nuxt.js module documentation. Also make sure that the customVariables property is set (it should be added automatically by create-nuxt-app script):

vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true
},

Finally, in order to change body and header fonts, you need to set the $body-font-family, $heading-font-family, and $font-size-root variables in /assets/variables.scss file:

$body-font-family: 'Libre Baskerville';
$heading-font-family: 'Oswald';
$font-size-root: 18px;
@import '~vuetify/src/styles/styles.sass';

You can find more information about custom variables in the Vuetify.js documentation and in the source code: global and for individual components.


Expected result.

Then, if you have followed this tutorial, you should get a nicely formatted page for the below template, as shown above. Note the display-1 class attribute on h1 element — Vuetify.js applies $heading-font-family font only to elements with display-*, headline and title class (see Typography for all available display classes).

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

You can find a complete working code example in this repository:

Untitled Factory

Mobile & web digital agency specializing in Progressive Web…

Jarek Lipski

Written by

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

Untitled Factory

Mobile & web digital agency specializing in Progressive Web Apps located in Paris, France.

More From Medium

More from Untitled Factory

More from Untitled Factory

More from Untitled Factory

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade