📝

UnoCSSでGoogle Fontsを読み込む方法

2025/01/22に公開

UnoCSSを使用してGoogle Fontsを簡単に導入する方法を紹介します。

1. Web Fontsプリセットのインストール

まず、@unocss/preset-web-fontsをインストールします。

npm install -D unocss @unocss/preset-web-fonts
pnpm install -D unocss @unocss/preset-web-fonts
yarn install -D unocss @unocss/preset-web-fonts
bun install -D unocss @unocss/preset-web-fonts

2. UnoCSS設定の更新

使いたいフォントが、Poppinsの場合の例として書いてます

  1. Google Fontsの方で、使いたいフォントの名前をコピー
  2. 既存のuno.config.ts(またはuno.config.js)ファイルを開き、以下のように更新します。
uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'

export default defineConfig({
  presets: [
    presetUno(),
    presetWebFonts({
      provider: 'google',
      fonts: {
        // 好きなクラス名: ["使いたいフォント名", "serif"]
        poppins: ["Poppins", "serif"]
      },
    }),
  ],
})
  1. そのフォントを使用したい要素のclassに font-つけた名前 を入れることで、適用できます
<p class="font-poppins">This paragraph uses Poppins font</p>

3. (任意) フォントをキャッシュする

デフォルトでは、プリセットはプロバイダーのCDNからフォントを取得していますが、フォントをローカルで提供したい場合は、 @unocss/preset-web-fonts/local のプロセッサを使用してフォントをダウンロードし、独自のサーバーから提供することができます。

fontAssetsDir: 'public/assets/fonts' のところは、自分の使っているフレームワークなどに合わせて設定してください

uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'

export default defineConfig({
  presets: [
    presetUno(),
    presetWebFonts({
      provider: 'google',
      fonts: {
        // 好きなクラス名: ["使いたいフォント名", "serif"]
        poppins: ["Poppins", "serif"]
      },
+      processors: createLocalFontProcessor({
+        // Directory to cache the fonts
+        cacheDir: 'node_modules/.cache/unocss/fonts',
+
+        // Directory to save the fonts assets
+        fontAssetsDir: 'public/assets/fonts',
+
+        // Base URL to serve the fonts from the client
+        fontServeBaseUrl: '/assets/fonts'
+      })
    }),
  ],
})

参考文献

Discussion