Vuetify - Change Default Font

Lets see how we can change default Roboto font used in vuetify

Vuetify.js is a component framework for Material Design that may be readily tweaked. It also allows you to adjust internal variables that affect how the CSS stylesheet is generated, in addition to the color theme. Now let us see how you can modify the default font in vuetify.

In this example, I have chosen Poppins font. For simplicity, we will retrieve these fonts from the Google Fonts service.

Folder structure

We need an scss folder and inside that folder two files _typography. scss and main. scss to write our font customization.

scss folder should be in your root directory.

folder should be inside src

Customization code

First, we have to copy the font CDN link from the google font service and paste it to index.html which is in the public folder.

public/index.html

Now lets write the customisation code.

link to code

link to code

Here we are customizing the default font family to Poppins and converting the font family of all vuetify classes into Poppins by looping over the $typoOptions variable.

Notice that on line 11 we are setting the font family to sans-serif as a call back to the new font. (Sans serif works if Poppins is not loaded)

Importing the file to main.scss and main.js

main.scss

Now import _typography.scss in to main.scss which is in the scss folder

we are doing this because future scss customization can be easily imported to main.scss

main.js

Here we are importing the main.scss file which we created to main.js file which is in the src folder(root directory).

tada… Now your vue.js website will be using Poppins google font instead of the boring Roboto.