📝
UnoCSSでGoogle Fontsを読み込む方法
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の場合の例として書いてます
- Google Fontsの方で、使いたいフォントの名前をコピー
- 既存の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"]
},
}),
],
})
- そのフォントを使用したい要素の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