title: Default font is partially changed in VuetifyJS
body: <p>i am using Vuetify 2.0.14. i have followed this post <a href="https://stackoverflow.com/a/57669275/2723677">Change Default Font in Vuetify</a> and taken the solution from @tzahi-leh. But i see the web page is partially changed with my custom font. I know Vuetify has the default Roboto font and i wanted to be changed as 'Ubunut'. i also download the Ubuntu font family and placed inside the <code>assets/fonts</code> folder.</p>
  
  <p>my App.vue <code>Style Content</code></p>
  
  <pre><code>&lt;style lang="scss" scoped&gt;
  $typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline;
  
  %font-choice {
    font-family: "Ubuntu", sans-serif !important;
  }
  
  @mixin md-typography {
    @each $typoOption in $typoOptions {
      .#{$typoOption} {
        @extend %font-choice;
      }
    }
  }
  
  .v-application {
    // font-size: 12px;
    @extend %font-choice;
    @include md-typography;
  }
  
  @font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    src: local("Ubuntu"), local("Ubuntu"),
    url("~@/assets/fonts/Ubuntu-R.ttf") format("ttf");
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Output page looks like bwlow. The Red highlighted are still showing as Roboto font style, where others are changed to Ubuntu font style. </p>
  
  <p><a href="https://i.stack.imgur.com/xhNIX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhNIX.png" alt="issue screen"></a></p>
  
  <p>I noticed that the styles with <code>display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline</code> are not behaving for/with custom style fonts.</p>
  
  <p>Any help on how to change completely to my custom font on whole website? please</p>