【Vue】Google Fonts を Vue3 で使用する（Vite 編）

概要

Google Fonts を Vue のソースに組み込む手順の備忘録。
今回は Vue-CLI や Webpack ではなく Vite を利用したバージョンの方法。

意外と記事が無かったので作成。
Viteの場合は、vite.config.js にフォント導入設定をします。

前提

• Vue: v3.2.41
• Vite: v3.2.3
• TypeScript: 4.6.4

※ TypeScriptを使用していない場合は、以降のファイル名記載が .ts の部分を、.js に読み替えてください

Google Fonts とは

色んなWebフォントを無料で提供しているサービス。設定を行うと、Webサービスで好きなフォント（字体）を表示することができる。

手順

1. フォント選び

Google Fonts で好きなフォントを選ぶ。

フォントをどれか選ぶと、以下の様な詳細ページが表示される。そこで、フォントの太さをどれか選ぶ

選んだら、そのフォントの設定値を確認しておく。

とりあえず画面はこのままにしておいて、次の手順へ進む。

2. プラグイン導入

Viteで作ったVueプロジェクトのディレクトリをターミナルで開き、以下のコマンドで vite-plugin-fonts というプラグインを導入する（使用するプラグインはこちら）

npm i vite-plugin-fonts

3. 設定を追記

先程のフォントの設定値（フォント名のみ）をコピーして、プロジェクト内の設定ファイル vite.config.ts に、以下の様に追記する

vite.config.ts

import { defineConfig } from 'vite'
import { VitePluginFonts } from 'vite-plugin-fonts' // 追加
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    // 以下を追加 ----------------
    VitePluginFonts({
      google: {
        families: [
          'M PLUS 2' // ここに導入したいフォント名を入れる
        ],
      }
    })
    // 追加はここまで -------------
  ]
})

4. CSS で font-family を設定する

全体（全画面）に適用する

Vite で作成した場合は、 src/style.css に既にファイルと中身が存在しているので、font-family という部分に、自分が設定ファイルに追記したフォント名を追記するだけです。

src/style.css

:root {
  /* 自分が設定したフォント（ここでは「'M PLUS 2'」）を追加する */
  font-family: 'M PLUS 2', Helvetica, Arial, sans-serif;
}

特定の要素だけに適用する

HTMLの一部の要素だけに部分的に適用したい場合は、クラス名やIDなどを使って以下の様に CSS を作成します。

.my-fonts {
    font-family: 'M PLUS 2', sans-serif;
}

5. 画面で表示確認

あとは、Web画面を起動して確認してみましょう。
（以下は、部分適用で５種類のフォントを導入・表示した例）

以上、参考にしてみてください！