Changing Default Fonts in Vuetify.js and Nuxt.js

A short tutorial about adapting typography using SCSS variables.

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:

GitHub - loomchild/change-vuetify-font: A project demonstrating how to change fonts in Vuetify.js…

Only one font

The first quick solution I am going to present allows us to only use one font in an entire application. All we need to do is add the following code in the nuxt.config.js file (see defaultAssets documentation for more details and note that the treeShake option is required):

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

Separate heading and body fonts

A more complete and flexible solution allows us to have separate fonts for the headings and for the text body. 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,
  defaultAssets: false
},

Note the last defaultAssets setting — it’s technically not required, but it prevents the browser from loading the default Roboto font, which we won’t need. However, you need to manually configure your selected icon font if you plan to use the icons (see Vuetify documentation and the final code for details — one extra link needs to be added to the head section in nuxt.config.js).

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.

Result

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:

loomchild/change-vuetify-font

Edit: Added defaultAssets solution when only one custom font is needed.