How to Import Custom Font in Vuetify Using Vue CLI 3 Version

Question

I'm trying to include custom font in Vueitfy project. Followed many resources but none of them worked. Vueitfy is overwriting my styles even if used !important

In my App.vue

<style lang="stylus">
  * {
        font-family: 'SofiaProSoftW01-Regular', Helvetica Neue, Roboto, Arial, sans-serif !important;
  }
</style>

In my public/index.html

<link href="http://db.onlinewebfonts.com/c/47ff3156fe928e750d0468143555356f?family=SofiaProSoftW01-Regular" rel="stylesheet" type="text/css"/>

Any help would be highly appreciated.

Answer 1

To modify Vuetify with Vue CLI styles:

Install stylus-loader to makes the internal webpack config handle all of them.

npm install -D stylus-loader stylus

1. Create a stylus folder to storing main.stylus the file inside the project and put this code in it:

$body-font-family = 'YourFontName';

// main.styl
@import '~vuetify/src/stylus/main'; 

2. Import the new main.styl file into your main.js:

import "./stylus/main.styl";