Webフォントプリセット

フォント名を指定するだけで、Google FontsやFontShareからWebフォントを使用できます。

サポートされているすべてのプロバイダーを参照してください。

ソースコード

インストール

::: code-group

pnpm add -D @unocss/preset-web-fonts

yarn add -D @unocss/preset-web-fonts

npm install -D @unocss/preset-web-fonts

bun add -D @unocss/preset-web-fonts

:::

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({ /* options */ }),
  ],
})

::: tip このプリセットはunocssパッケージに含まれており、そこからインポートすることもできます：

import { presetWebFonts } from 'unocss'

:::

プロバイダー

現在サポートされているプロバイダー：

• none - 何もしない、フォントをシステムフォントとして扱う
• google - Google Fonts
• bunny - プライバシーに配慮したGoogle Fonts
• fontshare - ITFによる高品質フォントサービス
• fontsource - NPMパッケージで自己ホストするオープンソースフォント
• coollabs - Google Fontsのプライバシーに配慮した代替

::: info プロバイダーを追加するためのPRを歓迎します。🙌 :::

カスタムフェッチ関数

独自の関数を使用してフォントソースを取得します。

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({
      // httpsプロキシを使用してaxiosを使用
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})

オプション

provider

• Type: WebFontsProviders
• Default: google

Webフォントのプロバイダーサービス。

type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'fontsource' | 'coollabs' | 'none'

fonts

• Type: Record<string,>

フォント。詳細は例を参照してください。

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * プロバイダーをオーバーライド
   * @default <matches root config>
   */
  provider?: WebFontsProviders
}

extendTheme

• Type: boolean
• Default: true

テーマオブジェクトを拡張します。

themeKey

• Type: string
• Default: fontFamily

テーマオブジェクトのキー。

inlineImports

• Type: boolean
• Default: true

CSSの@import()をインライン化します。

customFetch

• Type: (url: string) => Promise<string>
• Default: undefined

独自の関数を使用してフォントソースを取得します。カスタムフェッチ関数を参照してください。

例

presetWebFonts({
  provider: 'google', // デフォルトのプロバイダー
  fonts: {
    // これらはデフォルトのテーマを拡張します
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // カスタムフォント
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

以下のCSSが自動的に生成されます：

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* layer: default */
.font-lato {
  font-family: "Lato", sans-serif;
}
.font-lobster {
  font-family: "Lobster";
}
.font-mono {
  font-family: "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

フォントをローカルで提供する

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

import presetWebFonts from '@unocss/preset-web-fonts'
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'none',
      fonts: {
        sans: 'Roboto',
        mono: 'Fira Code',
      },
      // これによりフォントがダウンロードされ、ローカルで提供されます
      processors: createLocalFontProcessor({
        // フォントをキャッシュするディレクトリ
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // フォントアセットを保存するディレクトリ
        fontAssetsDir: 'public/assets/fonts',

        // クライアントからフォントを提供するためのベースURL
        fontServeBaseUrl: '/assets/fonts',

        // フォントをダウンロードするためのカスタムフェッチ関数
        fetch: async url => axios.get(url)
      })
    }),
  ],
})

これにより、フォントアセットがpublic/assets/fontsにダウンロードされ、クライアントから/assets/fontsとして提供されます。この方法を使用する場合、フォントのライセンスが再配布を許可していることを確認してください。このツールは法的問題に対して責任を負いません。

::: info

この機能はNode.js専用であり、ブラウザでは動作しません。

:::