Vuetifyで使用するフォントを変更する

Vuetifyの標準フォントは Roboto なので、日本語が含まれていません。
そこで、ライブラリ本体を編集せずに日本語対応フォントへ変更する方法をご紹介します。

CSS

NG

html, body{
    font-family: "M Plus 1p";
}

最初は愚直にhtmlルートとBodyへ記述してみたのですが、案の定、変更されませんでした。

OK

.v-application{
    font-family: "M Plus 1p" !important;
}

Vuetifyのビルトインクラスを覗いてみると.v-applicationがトップレベルのクラスとなっており、そこでフォントが指定されていることを確認しました。
なので、ライブラリをロード後に任意の場所で.v-applicationのフォント指定を上書きしてやればいいわけです。

CSSは後からロードされたものが上書き反映されるので、ライブラリのロード前にこの記述をしても、結局元に戻ってしまうので注意です。

他にも、Vuetifyのビルトインクラスを上書きすることで、痒いところに手が届くカスタマイズを行えるようになります。