# カスタムフォントリスト

- Human documentation: [https://docs.univer.ai/ja-JP/guides/docs/ui/fonts](https://docs.univer.ai/ja-JP/guides/docs/ui/fonts)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/docs/ui/fonts.md](https://docs.univer.ai/ja-JP/guides/docs/ui/fonts.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [docs/ui/fonts.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/ui/fonts.ja-JP.mdx)

---

## フォント構造の定義

Univer では、フォントは `IFontConfig` インターフェースを使用して定義されます：

| プロパティ      | 型                                                                      | 説明                                                             |
| ---------- | ---------------------------------------------------------------------- | -------------------------------------------------------------- |
| `value`    | `string`                                                               | フォントの一意の識別子。通常は CSS font-family の優先値でもあります。                    |
| `label`    | `string`                                                               | 国際化のための翻訳キー。Univer インスタンス作成時にこのキーが指定されていない場合、渡された値がそのまま表示されます。 |
| `category` | `'sans-serif' \| 'serif' \| 'monospace' \| 'display' \| 'handwriting'` | フォントカテゴリ。UI のグループ化に使用されます（オプション）。                              |

> [!NOTE]
> Univer は、ユーザーがインストールされていないフォントを選択することを防ぎません。クライアントに特定のフォントがインストールされていない場合、ブラウザはデフォルトのフォントを使用して代替表示します。

## カスタムフォントの使用

`UniverUIPlugin` の `customFontFamily` パラメーターを設定すると、フォントドロップダウンメニューのオプションを定義できます。

```typescript
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  customFontFamily: {
    list: [
      {
        value: 'PingFang SC',
        label: '苹方（简）',
        category: 'sans-serif',
      },
      {
        value: 'Helvetica Neue',
        label: 'Helvetica Neue',
        category: 'sans-serif',
      },
    ],
    // デフォルトのフォントリストを上書きするかどうか、デフォルトは false
    override: true,
  },
})
```

### Facade API

初期化時の設定に加えて、Facade API を使用して実行時に新しいフォントを動的に登録することもできます。これは、フォントリソースを非同期にロードする必要があるシナリオで非常に役立ちます。

```typescript
univerAPI.addFonts([{
  value: 'PingFang SC',
  label: 'PingFang SC',
  category: 'sans-serif',
}, {
  value: 'Helvetica Neue',
  label: 'Helvetica Neue',
  category: 'sans-serif',
}])
```