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

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

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

---

Slides のテキストエディターは、フォントファミリーのドロップダウンに Univer の共有フォントリストを使います。このアプリケーションレベルのリストは `UniverUIPlugin` で設定します。

## フォントの選択肢を設定する

```ts
import { UniverUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  customFontFamily: {
    list: [
      {
        value: 'Inter',
        label: 'Inter',
        category: 'sans-serif',
      },
      {
        value: 'Noto Serif',
        label: 'Noto Serif',
        category: 'serif',
      },
    ],
    override: false,
  },
})
```

`value` はテキストランのフォントファミリーとして書き込まれます。`label` は表示文字列または i18n キー、`category` は任意のグループです。

ブラウザーフォントは `@font-face` やスタイルシートで別途読み込んでください。リストに名前を追加してもフォントファイルはダウンロードされず、利用できない場合はブラウザーの代替フォントが使われます。

## Facade API

UI Facade の読み込み後は、`addFonts` で実行時に選択肢を追加できます。

```ts
univerAPI.addFonts([
  {
    value: 'Inter',
    label: 'Inter',
    category: 'sans-serif',
  },
])
```

共有ドロップダウンはすぐに更新されますが、対応するフォントバイトは読み込まれません。