# 사용자 지정 글꼴 목록

- Human documentation: [https://docs.univer.ai/ko-KR/guides/sheets/ui/fonts](https://docs.univer.ai/ko-KR/guides/sheets/ui/fonts)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/sheets/ui/fonts.md](https://docs.univer.ai/ko-KR/guides/sheets/ui/fonts.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [sheets/ui/fonts.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/ui/fonts.ko-KR.mdx)

---

## 글꼴 구조 정의

Univer에서는 `IFontConfig` 인터페이스를 사용하여 글꼴을 정의합니다.

| 속성         | 타입                                                                     | 설명                                                                   |
| ---------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------- |
| `value`    | `string`                                                               | 글꼴의 고유 식별자이며, 일반적으로 CSS font-family에 사용할 우선값입니다.                     |
| `label`    | `string`                                                               | 국제화를 위한 번역 키입니다. Univer 인스턴스를 생성할 때 이 키가 지정되지 않았다면 전달된 값이 그대로 표시됩니다. |
| `category` | `'sans-serif' \| 'serif' \| 'monospace' \| 'display' \| 'handwriting'` | UI에서 그룹화할 때 사용하는 글꼴 카테고리입니다(선택 사항).                                  |

> [!NOTE]
> Univer는 사용자가 설치되지 않은 글꼴을 선택하는 것을 막지 않습니다. 클라이언트에 글꼴이 설치되어 있지 않으면 브라우저가 기본 글꼴로 대체합니다.

## 사용자 지정 글꼴 사용하기

`UniverSheetsCorePreset`(프리셋 모드) 또는 `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',
      },
    ],
    // Whether to override the default font list, defaults to false
    override: true,
  },
})
```

#### 프리셋 모드

```typescript
const { univerAPI } = createUniver({
  presets: [
    UniverSheetsCorePreset({
      container: 'app',
      customFontFamily: {
        list: [
          {
            value: 'PingFang SC',
            label: '苹方（简）',
            category: 'sans-serif',
          },
          {
            value: 'Helvetica Neue',
            label: 'Helvetica Neue',
            category: 'sans-serif',
          },
        ],
        // Whether to override the default font list, defaults to 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',
}])
```