ソフトウェア開発プログラミング

[NuxtJS]Vuetifyjsのデフォルトフォントを変更する

ソフトウェア開発
この記事は約5分で読めます。
スポンサーリンク

NuxtJSUI frameworkVuetify.jsを選択すると、Vuetify.jsのデフォルトのフォントには「Robotosans-serif」が設定されているんですが、日本語のフォントがあまり綺麗じゃないので、今回はVuetify.jsでデフォルトフォントを変更する方法について説明したいと思います。

スポンサーリンク

前提条件

  • vue:2.6.14
  • nuxt:2.15.8
  • vuetify:2.6.1

こちらから今回のソースコードを確認できます。

GitHub - koichi-ezato/nuxt-sample at デフォルトフォント変更
Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

Vuetify.jsについて

Vuetify.jsは、マテリアルコンポーネントを提供するVue UIライブラリです。簡単にコンポーネントをカスタマイズすることができます。

Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...

利用するフォントについて

今回はGoogleが提供するGoogle Fontsを利用したいと思います。

Google Fonts
Making the web more beautiful, fast, and open through great typography

こちらのサイトから気に入ったフォントを選択し、画面上部の右側の「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.jsheadセクションにフォントのURLを設定します。vuetifyセクションではcustomVariablesにデフォルトフォントを定義するscssファイルを指定し、treeShaketrueを設定します。

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-root18pxを指定しています。この設定の後で、styles.sassをインポートします。

この順番が逆になっているとデフォルトフォントは変更されないので注意しましょう。

動作確認

画面のフォントをChromeのデベロッパーツールで確認してみます。

フォントが変更されているのが確認できました!!

最後に

日本語のWebアプリだと海外製のフレームワークでは日本語があまり綺麗じゃないこともありますが、今回のようにデフォルトフォントを変更することで日本語に対しても綺麗に表示できるフォントを設定することができるようになります。

こちらから今回のソースコードを確認できます。

GitHub - koichi-ezato/nuxt-sample at デフォルトフォント変更
Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.
スポンサーリンク
スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました