Nuxt.jsでVuetify（V2）を使うときにデフォルトのフォントを変更する

2020-01-18

Vuetify は内部でクラスにフォントを指定していてbodyにfont-familyで指定しても設定されません。
!importantで強制的に上書きすれば設定できるかと思いますが使わないで設定できるのであればそっちのほうが良いので!importantを使わず変更する方法です。

定義されたSASSの変数を上書きする

VuetifyのV2以降はSassでスタイルが管理されていてある程度カスタマイズできる様になっていてフォントも変更できるようになっています。
Nuxt.jsのVuetifyモジュールだとオプションのcustomVariablesからカスタム用のSCSSのファイルが指定できるようになっているのでそこから上書きできます。

// nuxt.config.js
export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss']
  }
}

// assets/variables.scss
$body-font-family: "Open Sans";

ただし一つ問題があってデフォルトだとprocess.env.NODE_ENVがproductionの状態でビルドしないとcustomVariablesに指定したファイルが反映されない仕様になってます。
デプロイ前にビルドする時は問題ないのですがyarn run devとかでビルドすると反映されないのでローカルで開発するときに困ります。
VuetifyモジュールのオプションのtreeShakeにtrueを指定すれば反映されますがビルド時間が激増するのでそれはそれで問題です。

手っ取り早く雑に上書きする

applicationというclassにfont-familyが設定されているので直接上書きする方法です。
こちらの方法はcustomVariablesと違っていつでも適用されますのでローカル開発でも有効です。
自動生成される要素に自動で付くclassなので直接いじるとバージョンアップ等でclass名が変わったりした時に死にますが手っ取り早く上書きできます。

.application {
  font-family: "Open Sans";
}