Vuetify & Vue CLI 3 — Change Default Font
#UPDATE: This article applies to Vuetify v1.5 w/ Stylus, not v2 w/ SCSS
Sometimes fairly simple things stump me more that they should. In this case I started playing around with the new Vue CLI 3 alongside the Vuetify component library, and found myself running around in circles trying to change the default font in the “right” way. Since it took me an embarrassing amount of time to get this sorted, I’ve written this post for any poor soul who finds themselves in the same position :)
Here’s the method that worked for me:
- ) Import a font
For this step you can install a font via npm / yarn or add a link in the index.html file — I did the latter:
2.) Create a stylus folder / main.stylus file
Since Vuetify uses stylus (as opposed to css or sass, for example) for its style definitions & builds, we can use stylus to over-write variables (such as the body-font variable). To do that first create a folder named “stylus” in your ./src dir and then create a file name main.styl inside that folder:
3.) Inside the main.styl file, set your desired font:
4.) Finally, import the new main.styl file into your main.js:
And that’s it — now your components will have their font set as whatever font you chose. Of course you can import other variables and set their font separately in case you have a primary + secondary font.
One of the main things that threw me off trying to get this to work is that the Vuetify docs don’t recommend this if you’re using Vue-CLI 3:
There may very well be an easier way to get this done, but I couldn’t find it. If there’s a better way please share it in the comments!
Hopefully that helped someone out there :)
- ADDITIONAL INFO FROM COMMENTS BELOW:
Hugo Mejia added a detailed comment that includes some additional information that may help some people, so here’s a lightly edited version:
“…just in case some of your readers are wondering how to make it work when you want to import your font using NPM, the answer is: put it in the main.styl file.
For example if you want to use the Nunito font using Npm typeface-nunito package, then your main.styl should look like this after importing the font:
require(‘typeface-nunito’)
$body-font-family = ‘Nunito’
@import ‘~vuetify/src/stylus/main’.
[Also adding these specific] NPM packages specified in vuetify theme styling page [may help]:
npm i stylus stylus-loader style-loader css-loader --save-dev
Finally I can confirm that if you made your project using vue-cli 3, then NO changes are required to the webpack.base.conf.js nor to the webpack.config.js, as webpack 4 is already configured to handle Stylus files”
