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.

Ali Bahrami · Accepted Answer · 2019-07-08 14:07:55Z

2

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

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';

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

import "./stylus/main.styl";

edited Jul 8, 2019 at 14:07

answered Jul 8, 2019 at 6:54

Ali Bahrami

6,0833 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Thiel Over a year ago

I think the var is called: $body-font-family instead of $font-body-family?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related