1

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.

1 Answer 1

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
  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'; 
  1. Import the new main.styl file into your main.js:
import "./stylus/main.styl";
Sign up to request clarification or add additional context in comments.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.