我想不出如何更改默认字体在vuetify。我一直在寻找./node_modules/vuetify内正确的变量，但我不能找到它。
我非常不使模块中的任何改变，但宁愿覆盖从模块的外部这样的变量。
最简单的方法是简单地设置body的字体家庭。如果您使用的WebPack和导入Vuetify触笔输入，main.styl，你可以简单地覆盖你想要的任何字体$font-family变量。
我注意到，至少在最新版本的Vuetify的，你需要指定$body-font-family和$heading-font-family从的Roboto改变一切的字体，否则在你的覆盖（以下these instructions）的东西。 $headings的重新定义，似乎因为它在_variables.styl定义，取决于$heading-font-family是必要的。需要注意的是Vuetify将在2.0被moving to SCSS所以会出现在这一点上一个新的进程。
$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 }
}
我不能保证，这是“最佳实践”。但考虑到有关于如何做到这一点正确，我要告诉你我是如何做到了这一点没有任何文档。
我现在用的是Nuxt的WebPack模板，所以我的文件结构可能会比你有点不同，但概念是相同的。
我有一个静态资产文件夹。在该文件夹我有一个全局CSS文件。我下载我是用一个文件中的字体，并把它添加到我的静态目录中。但是，你可以把它几乎任何地方。
下面是我添加到我的全局CSS文件中的代码：
@font-face{
font-family: **any name you want to give the font**;
src: url(**location in directory**) format("opentype");
}
然后你只需把它添加到你的造型规则，你通常会
*{
font-family: **the same name you gave it above**;
}
h1{
font-family: **the same name you gave it above**;
}
等...
记住要输入正确的格式。如果你的文件下载的杂项文件是OpenType字体。如果是的.ttf它是TrueType字体。
我还没有想出如何包括来自CDN的字体。如果我明白这一点，我会让你知道。
最好的办法
对于vuetify 2+
限定
.v-application {
font-family: "Font Family Name";
}
在app.vue或者直接导入到app.vue单独SCSS / CSS文件
对于vuetify 1.5.x在你app.vue脚本添加
.application {
font-family: "Font Family Name";
}
例如，如果您使用的是谷歌的字体，脚本标签应该看起来像
<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");
.application {
font-family: "Questrial";
}
</style>
不幸的是，@爱丽丝-MX的回答并没有为我工作（无法从node_modules进口）。
这是我在我的代码（使用Vuetify 2）解决了这个问题：
下载想要.woff2文件，并把它放在src /资产/字体后，我加入这个代码，我App.vue文件（或者无论你在项目中设置主VUE文件）：
// 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>
我希望这个能帮上忙！
这answer帮助我形成.scss码
对于Laravel Vuetify用户，这一切您需要：更新您的webpack.min.js文件看起来像：
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');
你main.styl应位于路径：resources\stylus\main.styl你main.styl文件应该是这样的：
@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'
为了防止Vuetify从写内嵌样式，可以覆盖你main.css，这样做：
mix.options({
extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
});
最后，确保手写笔装载机是设置好的，如果不是在命令行中运行：
$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev
您还可以安装NPM材料设计的图标，iconfont。
npm install material-design-icons-iconfont --save
如果您正在使用Vuetify 2+，过程会非常类似于jeffbaumes的答案，但用无礼的话，而不是手写笔
// 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))));
}
或者你可以改变一些标题样式的字体，而不是别人是这样的：
$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));