unplugin-fontsでViteでGoogleフォントを使えるようにする

大したことないメモですが、まだまだViteに関する情報は少なかったので一応書き留めておきます。

使用するプラグイン

導入方法

インストールは公式様の手順通りです。

install

npm i --save-dev unplugin-fonts

使いたいフォント名を以下のように指定します。

vite.config.js

import Unfonts from 'unplugin-fonts/vite'

export default defineConfig({
  plugins: [
    vue(),
    Unfonts({
      google: {
        families: [
          'Noto Sans JP'
        ],
      }
    }),
  ],
})

するとCSSで使えます。

sample.css

font-family: 'Noto Sans JP', sans-serif;

つぶやき

手順をよく見ずになんとなくdependenciesに入れてたんですけど、devDependenciesで良いんですね。