title: Vuetify font is different in production vs dev
body: <p>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 <code>Roboto</code>.
  There are various solutions that I've tried but none seem to overwrite the default font CSS.</p>
  <p>Here is my <code>SCSS</code> in the <code>App.vue</code> component.</p>
  <pre><code>@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;
  }
  </code></pre>
  <p><strong>Dev CSS in Chrome</strong></p>
  <p><a href="https://i.stack.imgur.com/RcKh6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcKh6.png" alt="dev css" /></a></p>
  <p><a href="https://i.stack.imgur.com/ukXJE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukXJE.png" alt="dev css" /></a></p>
  <p><strong>Production CSS in Chrome</strong></p>
  <p><a href="https://i.stack.imgur.com/uOGzh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOGzh.png" alt="production header" /></a></p>
  <p><a href="https://i.stack.imgur.com/09Z0T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/09Z0T.png" alt="enter image description here" /></a></p>
  <p>What is the correct method of setting the default font for all elements?</p>