Change default font in vuetify

Question

I can\'t figure out how to change the default font in vuetify. I\'ve been looking for the right variable within ./node_modules/vuetify, but I can\'t locate it.

I\'d

Answer 1

I cannot guarantee that this is "best practice". But considering that there is no documentation on how to do this properly I am going to tell you how I accomplished this.

I am using the Nuxt webpack template so my file structure may be a bit different than yours but the concept is the same.

I have a static assets folder. Within that folder I have a global css file. I downloaded the font I was using as a file and added it to my static directory as well. But you could put it pretty much anywhere.

Here is the code that I added to my global CSS file:

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

Then you just add it to you styling rules as you normally would

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

ect...

Remember to enter the correct format. If your file downloads as a .otf it is opentype. If it is .ttf it is truetype.

I have not yet figured out how to include a font from CDN. If I do figure that out I will let you know.