Change default font in vuetify

I can't figure out how to change the default font in vuetify. I've been looking for the right variable within ./node_modules/vuetify, but I can't locate it.

I'd ideally not make any changes in the module, but would rather override such variables from outside the module.

The easiest way would be to simply set the font-family on body. If you are using webpack and importing the Vuetify stylus entry, main.styl, you can simply overwrite the $font-family variable with whatever font you want.

I have noticed that, at least in recent versions of Vuetify, you need to specify both $body-font-family and $heading-font-family to change the fonts of everything from Roboto to something else in your overrides (following these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS in 2.0 so there will be a new process at that point.

$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}

I cannot guarantee that this is "best practice". But considering that there is no documentation on how to do this properly I am going to tell you how I accomplished this.

I am using the Nuxt webpack template so my file structure may be a bit different than yours but the concept is the same.

I have a static assets folder. Within that folder I have a global css file. I downloaded the font I was using as a file and added it to my static directory as well. But you could put it pretty much anywhere.

Here is the code that I added to my global CSS file:

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

Then you just add it to you styling rules as you normally would

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

ect...

Remember to enter the correct format. If your file downloads as a .otf it is opentype. If it is .ttf it is truetype.

I have not yet figured out how to include a font from CDN. If I do figure that out I will let you know.

Best way

For vuetify 2+

Define

.v-application {
   font-family: "Font Family Name";
 }

In 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";
}

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>

Unfortunately, @alice-mx answer didn't work for me (couldn't import from node_modules).

This is how I solved this problem in my code (using Vuetify 2):

After downloading the wanted .woff2 file and put it in src/assets/fonts, I added this code to my App.vue file (or whichever main vue file you set in your project):

// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify

%font-choice {
  font-family: "Noto Sans", sans-serif !important;
}

@mixin md-typography {
@each $typoOption in $typoOptions {
  .#{$typoOption} {
    @extend %font-choice;
  }
}

.v-application { // This is where we'll add all the md-typography classes
  font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

// add font-face because in this case Noto-Sans is taken from Google fonts
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"),
    url("~@/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>

I hope this will help!

This answer helped me to form the .scss code

For Laravel Vuetify users, this all you need: Update your webpack.min.js file to look like:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

Your main.styl should be located in the path: resources\stylus\main.styl Your main.styl file should look like this:

@import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");

$body-font-family = 'Literata', serif
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'

To prevent Vuetify from writing inline styles that could override your main.css, do:

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

And finally, ensure stylus-loader is setup already, if not run in command line:

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

You can also npm install material-design-icons-iconfont.

npm install material-design-icons-iconfont --save

If you are using Vuetify 2+, the process will be very similar to jeffbaumes's answer but using Sass instead of Stylus

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'My Custom Font', cursive;

$heading-font-family: $body-font-family, cursive;

@each $heading, $style in $headings {
    $headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}

Or you can change the fonts of some heading styles and not others like this:

$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));

来源：https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify

标签

Vue.js

vuetify.js