# 글꼴 편집

## Content

SpreadJS는 사용자가 워크시트, 차트 및 기타 시각적 요소 전반에서 다양한 폰트 패밀리를 선택하고 적용할 수 있도록 지원합니다. 특히, 텍스트 입력 시 시스템은 자동으로 [문서 테마](/spreadjs/docs/features/styletheme/themes)의 기본 폰트 패밀리를 적용하여 시각적 일관성을 유지하면서도 사용자 맞춤형 커스터마이징이 가능합니다.
물론 특정 디자인 요구에 따라 테마 기본값과 다르게 설정해야 하는 경우도 있습니다. SpreadJS 디자이너 컴포넌트에서는 모든 시각적 요소에 대해 폰트 패밀리를 손쉽게 조정할 수 있습니다.
이 글에서는 주로 워크시트 셀 내 텍스트의 폰트 패밀리 설정 방법을 설명하며, 차트, 도형 등의 기타 요소에 대한 간단한 개요도 마지막에 제공합니다.

***

## 셀에 대한 설정

스프레드시트에서 폰트 패밀리를 변경하려면 **HOME 리본 탭 → Fonts 그룹**에 있는 **Font Family Box**를 사용하면 됩니다.
![image.ce13b6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.ce13b6.1e7840.png)

### **방법 1: 드롭다운 목록 선택**

1. **폰트 컨트롤 활성화**
    * 대상 셀에 커서를 두세요.
    * **Font Family 드롭다운**이 보이는지 확인하세요.
2. **선호하는 폰트 선택**
    * 드롭다운 화살표를 클릭하여 목록을 엽니다.
    * 원하는 폰트를 찾아 선택합니다.
    * 폰트 이름을 클릭합니다.

![1.ca14b3.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/1.ca14b3.503ca3.gif?width=600)

***

### **방법 2: 직접 텍스트 입력**

1. **폰트 컨트롤 활성화**
    * 대상 셀에 커서를 두세요.
    * **Font Family 드롭다운**이 보이는지 확인하세요.
2. **폰트 패밀리 입력**
    * 입력 박스의 기본 폰트명을 지웁니다.
    * 폰트 패밀리 이름을 입력합니다. (대소문자 구분 없음, 공백 자동 제거)
    * **Enter**를 눌러 입력을 적용합니다 (드롭다운이 닫힘).

![2.019543.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/2.019543.692b8d.gif?width=600)

>type=note
> **참고:**
> 빈 입력값은 저장되거나 적용되지 않습니다.

SpreadJS는 선언형 폰트를 사용하므로, 사용자가 입력한 폰트가 목록에 없어도 적용됩니다. 실제 적용 여부는 브라우저의 폰트 렌더링 정책을 따릅니다.
![3.d7eed7.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/3.d7eed7.878bc4.gif?width=600)

***

#### 입력 시 폰트 자동 필터링

드롭다운이 열려 있는 상태에서 입력하면, 목록은 자동으로 입력값과 일치하는 첫 번째 폰트를 선택합니다. (폰트 이름 앞부분 기준)
![4.058f29.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.058f29.576320.gif?width=600)

>type=note
> **참고:**
> 입력 직후 Enter를 누르면, 일치하는 첫 번째 폰트가 자동 선택됩니다.

***

#### 개발자 구성 방법

개발자는 퍼블릭 API를 통해 폰트 드롭다운 목록을 구성할 수 있습니다.

```javascript
export let FontFamily: IComboBoxCommand = {
  title: "${res.ribbon.home.fontFamily}",
  text: "Font Family",
  type: "comboBox",
  commandName: CommandNames.FontFamily,
  editable: true,    // 수동 입력 허용
  autoSelect: true   // 첫 번째 일치 항목 자동 선택
  ...
}
```

>type=note
> **참고:**
>
> * `editable`이 `false`이면 수동 입력이 비활성화됩니다.
> * `autoSelect`가 `false`이면 첫 번째 일치 항목 자동 선택이 비활성화됩니다.

***

### 셀 서식 대화상자에서 편집

#### Font 탭에서 편집

Format Cells 대화상자의 **Font 탭**에서도 폰트 패밀리를 설정할 수 있습니다. 방법은 앞서 설명한 방식과 동일합니다.
![5.36515c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.36515c.f4cd9b.gif?width=800)

#### 여백 탭에서 편집

자세한 내용은 [셀 패딩과 라벨 스타일](/spreadjs/docs/features/cells/cellpadding)을 참고하세요.
![gif11.d93de3.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/gif11.d93de3.0d6e01.gif?width=800)

***

### 테마 폰트 사용자 정의 대화상자에서 편집

자세한 내용은 [페이지 테마 만들기/사용자 정의](/spreadjs/docs/spreadjs-designer-component/customizations/create-and-customize-page-layout-themes)를 참고하세요.
![7.8050e5.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/7.8050e5.22faa8.gif)

***

## 기타 요소에 대한 설정

앞서 설명한 두 가지 방법과 유사하게, 폰트 패밀리 조정이 가능한 모든 텍스트 필드에서 선택 또는 입력이 가능합니다.

### **차트**

자세한 내용은 [차트](/spreadjs/docs/features/Charts)를 참고하세요.
![8.9ad789.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/8.9ad789.844de1.gif?width=800)

### **도형**

자세한 내용은 [도형](/spreadjs/docs/features/UnderstandingShapes)를 참고하세요.
![9.28958c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/9.28958c.436197.gif)

### **바코드**

자세한 내용은 [바코드](/spreadjs/docs/features/WorkingwithBarcodes)를 참고하세요.
![10.d9c1e3.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/10.d9c1e3.e81074.gif?width=600)

### **데이터 차트**

자세한 내용은 [데이터 차트](/spreadjs/docs/features/data-charts)를 참고하세요.
![11.a1ffaf.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/11.a1ffaf.23b5c3.gif?width=800)