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

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

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

---

PDF テキストとエディターのフォントメニューは、関連はあるものの異なるデータソースを使います。

| データソース                                    | 制御する内容                                     |
| ----------------------------------------- | ------------------------------------------ |
| `document.assets.fonts` とテキストランの `fontId` | ネイティブ内容の再現に使う、インポート済み PDF フォントのメタデータとリソース。 |
| 編集可能なテキストランの `fontFamily`                 | 編集可能テキストのレイアウトと描画に使う CSS フォントファミリー。        |
| Univer の共有フォントリスト                         | PDF インスペクターのフォントドロップダウンに表示する選択肢。           |

共有リストに選択肢を追加しても、`document.assets.fonts` にアセットは追加されず、フォントファイルのダウンロードや埋め込みも行われません。

## エディターのフォントリストを設定する

`editor.enabled` が `true` の場合、PDF インスペクターは共有の `FontFamilyDropdown` を使います。ブラウザー設定の `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,
  },
})
```

ブラウザーフォントは `@font-face` やスタイルシートで別途読み込んでください。読み込まれていない場合、Canvas はブラウザーの代替フォントを使います。

## 実行時に選択肢を追加する

UI Facade の読み込み後は、`addFonts` で同じ共有リストに選択肢を追加できます。

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

このメソッドが更新するのはアプリケーションのフォントリストだけです。フォントバイトの読み込みや既存 PDF ランの書き換えは行いません。

## 編集可能な PDF テキストにフォントを設定する

テキスト挿入時に `fontFamily` を渡すか、PDF Facade で編集可能なテキストボックスを更新します。

```ts
const page = univerAPI.getActivePdf()?.getPageByIndex(0)
const textBox = page?.insertTextBox({
  text: 'Hello PDF',
  fontFamily: 'Inter',
  fontSize: 14,
  left: 36,
  top: 36,
})

textBox?.setTextStyle({ fontFamily: 'Noto Serif' })
```

`page.getTextSpans()` が返すインポート済みネイティブテキストはスナップショットであり、その場ではスタイルを変更できません。`replaceText(...)` で編集可能なテキストボックスへ昇格してから `setTextStyle` を呼び出してください。