CODEWITHSUNDEEP
vue.jsvuetify.js
Michael
Michael

Reputation: 4351

Vuetify font is different in production vs dev

I've noticed that my deployed app is using a different font to the dev app. I've tried multiple methods of setting the font in the deployed app but I'm having it default to Roboto. There are various solutions that I've tried but none seem to overwrite the default font CSS.

Here is my SCSS in the App.vue component.

@font-face {
  font-family: 'ITC Avant Garde Gothic Std Extra Light';
  font-style: normal;
  font-weight: normal;
  src: local('ITC Avant Garde Gothic Std Extra Light'),
  url('./fonts/ITCAvantGardeStdXLt.woff') format('woff');
}

$heading-font-family: 'ITC Avant Garde Gothic Std Extra Light';
$font-family: 'ITC Avant Garde Gothic Std Extra Light';
$body-font-family: 'ITC Avant Garde Gothic Std Extra Light';
$title-font: 'ITC Avant Garde Gothic Std Extra Light';

.v-application {
  [class*='text-'] {
    font-family: $font-family, 'ITC Avant Garde Gothic Std Extra Light' !important;
  }

  font-family: $font-family, 'ITC Avant Garde Gothic Std Extra Light' !important;
}

Dev CSS in Chrome

dev css

dev css

Production CSS in Chrome

production header

enter image description here

What is the correct method of setting the default font for all elements?

Upvotes: 1

Views: 217

Answers (1)

U-Dev
U-Dev

Reputation: 1387

First of all, you are directly changing the .v-application class which is a bad way of doing it. Please use official way to change it using SASS variables. Here's the link.

$body-font-family: 'ITC Avant Garde Gothic Std Extra Light';

I know you are using $body-font-family but I am pretty sure that the variables are not working as you have added them in your App.vue SCSS. Remove .v-application classes and follow the guide properly to get it working.

Create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. The vuetify-loader will automatically bootstrap your variables into Vue CLI’s compilation process, overwriting the framework defaults.

Upvotes: 1

Related Questions