Default font is partially changed in VuetifyJS

问题

i am using Vuetify 2.0.14. i have followed this post Change Default Font in Vuetify 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 assets/fonts folder.

my App.vue Style Content

<style lang="scss" scoped>
$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");
}
</style>

Output page looks like bwlow. The Red highlighted are still showing as Roboto font style, where others are changed to Ubuntu font style.

I noticed that the styles with display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline are not behaving for/with custom style fonts.

Any help on how to change completely to my custom font on whole website? please

回答1:

Best way

Define (if you use google fonts)

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

For vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

Notice the separate declaration of .title as those are often given a different font (A display font) same goes for .heading and .subheading.

Write this in your app.vue or a separate scss/css file imported directly into app.vue.

For vuetify 1.5.x In your app.vue script add

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

For example, if you are using a google font, your script tag should look like

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

回答2:

Remove scoped from <style lang="scss" scoped>

回答3:

After searching a lot of time, i found an answer.

First you need import the vuetify sass settings:

@import '~vuetify/src/styles/styles';

and change $body-font-family variable to your font-family

$body-font-family: Montserrat, sans-serif;

then override the typography settings like in the doc: Sass Variables

$headings: map-deep-set($headings, 'h1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h3' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h4' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h5' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h6' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'subtitle-1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'subtitle-2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'body-1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'body-2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'caption' 'font-family', $body-font-family);

来源：https://stackoverflow.com/questions/57793387/default-font-is-partially-changed-in-vuetifyjs

标签

Vue.js

vuetify.js