Vuetify（V1）のデフォルトのフォントを変更する
2019-05-03
Vuetify
は内部でフォントを指定していてbodyにfont-familyで指定しても設定されません。
!importantで強制的に上書きすれば設定できるかと思いますが使わないで設定できるのであればそっちのほうが良いので!importantを使わず変更する方法です。
2020/01/18更新 V2向け記事を書きました
手っ取り早く雑に上書きする
applicationというclassにfont-familyが設定されているので直接上書きする方法です。
自動生成される要素に自動で付くclassなので直接いじるとバージョンアップ等でclass名が変わったりした時に死にますが手っ取り早く上書きできます。
.application {
font-family: "Open Sans";
}
Stylusファイルに定義された変数を上書きする
VuetifyのStylusファイルにデフォルトのフォントが定義されているのでそれを上書きする方法です。
ファイルを直接修正するのではなく新しくファイルを作成して@requireでVuetifyのapp.stylを読み込むようにしましょう。
Nuxt.jsだとassets/style/app.stylでapp.stylを@requireしているのでこんな感じで追加すればOK。
$body-font-family = 'Open Sans'
// Import Vuetify styling
@require '~vuetify/src/stylus/app.styl'
