NuxtJSのUI frameworkでVuetify.jsを選択すると、Vuetify.jsのデフォルトのフォントには「Robotoとsans-serif」が設定されているんですが、日本語のフォントがあまり綺麗じゃないので、今回はVuetify.jsでデフォルトフォントを変更する方法について説明したいと思います。
前提条件
- vue：2.6.14
- nuxt：2.15.8
- vuetify：2.6.1
こちらから今回のソースコードを確認できます。
Vuetify.jsについて
Vuetify.jsは、マテリアルコンポーネントを提供するVue UIライブラリです。簡単にコンポーネントをカスタマイズすることができます。
利用するフォントについて
今回はGoogleが提供するGoogle Fontsを利用したいと思います。
こちらのサイトから気に入ったフォントを選択し、画面上部の右側の「Selected families」をクリックします。
すると以下の画面が表示されるので、赤枠内の<link>タグの内容をコピーしておきます。
今回はNoto Sans Japaneseというフォントを使用してみたいと思います。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
デフォルトフォントを変更する
nuxt.config.js
以下のように設定を変更します。
export default {
...
head: {
...
link: [
...
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Oswald:wght@700&family=Roboto&display=swap',
},
],
},
...
vuetify: {
customVariables: ['~/assets/variables.scss'], # ←追加
treeShake: true, # ←追加
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
},
},
}
nuxt.config.jsのheadセクションにフォントのURLを設定します。vuetifyセクションではcustomVariablesにデフォルトフォントを定義するscssファイルを指定し、treeShakeにtrueを設定します。
treeShakeの設定ができていないとデフォルトフォントが変更されないので要注意です。
variables.scss
variables.scssを下記のように編集します。
// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;
$body-font-family: 'Noto Sans JP';
$font-size-root: 18px;
@import '~vuetify/src/styles/styles.sass';
$body-font-familyがデフォルトのフォントなので、そこにNoto Sans JPを指定します。ついてにフォントサイズも変更したいので、$font-size-rootに18pxを指定しています。この設定の後で、styles.sassをインポートします。
この順番が逆になっているとデフォルトフォントは変更されないので注意しましょう。
動作確認
画面のフォントをChromeのデベロッパーツールで確認してみます。
フォントが変更されているのが確認できました！！
最後に
日本語のWebアプリだと海外製のフレームワークでは日本語があまり綺麗じゃないこともありますが、今回のようにデフォルトフォントを変更することで日本語に対しても綺麗に表示できるフォントを設定することができるようになります。
こちらから今回のソースコードを確認できます。
