# Edit Font Family

## Content

SpreadJS empowers users to select and apply diverse font families across worksheets, charts, and other visual elements. Notably, the system automatically applies the [document themes](https://developer.mescius.com/spreadjs/docs/features/styletheme/themes "https://developer.mescius.com/spreadjs/docs/features/styletheme/themes")'s default font family whenever text input occurs, ensuring visual consistency while maintaining customization flexibility.
Of course, there may be times when you need to deviate from the theme’s default to meet specific design needs. In SpreadJS Designer Component, you can easily adjust the font family for any visual element.
This article will primarily explain how to configure font families for text within worksheet cells. A brief overview of font family configuration for other elements​​ (charts, shapes, etc.) will be provided toward the end of the article.

## Configure for Cells

You can change the font family in spreadsheet using the Font Family Box present in the Fonts group under the HOME ribbon tab.
![image](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.ce13b6.png?width=900)

### **Method 1: Dropdown List Selection​**​

1. **Activate Font Contro**​**​l​**​
    * Place cursor within target cell(s).
    * Ensure **Font Family dropdown** is visible.
2. ​**​Select Preferred Font​**​
    * Click the dropdown arrow to open the font list.
    * Scroll to select the desired font.
    * Click on the font name.

![1.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/1.ca14b3.gif?width=600)

### **Method 2: Direct Text Input​**​

1. ​**Activate Font Contro**​**​l​**​
    * Place cursor within target cell(s).
    * Ensure **Font Family dropdown** is visible.**​**
2. **Access Font Family Field​**​
    * Clear default font name from input box.
    * Type font family name. (case-insensitive, automatically trim whitespace characters)
    * Press **Enter** to submit your input (the dropdown list will close).

![2.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.019543.gif?width=600)

>type=note
> **Note:**
> Empty input will not be saved or applied.

SpreadJS uses declarative fonts, so even if a font entered by the user is not in the font list, the font will still take effect.The effective rules follow the browser’s font rendering policy
![3.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.d7eed7.gif?width=600)

#### Type to Filter the Desired Font

As you type, if the dropdown list is open, the dropdown list will automatically select the first matching font (matches from the beginning of the font name).
![4.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/4.058f29.gif?width=600)

>type=note
> **Note:**
> Pressing Enter immediately after input will automatically select the first matching font, if available.

#### Configuration by Developers

Developers can configure the font dropdown list via public APIs:

```javascript
export let FontFamily: IComboBoxCommand = {
  title: "${res.ribbon.home.fontFamily}",
  text: "Font Family",
  type: "comboBox",
  commandName: CommandNames.FontFamily,
  editable: true,    // Enable manual input
  autoSelect: true   // Auto-select the first matched font
  ...
}
```

>type=note
> **Notes:**
>
> * If `editable` is set to `false`, manual input is disabled.
> * If `autoSelect` is set to `false`, auto-select the first matched font is disabled.

### Edit in the Format Cells Dialog

#### Edit in the Font Tab

You can also configure font families through the Format Cells dialog.​​ This method follows the same operation as the previously discussed approache.
![5.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.36515c.gif?width=800)

#### Edit in the Padding Tab

Learn more about [Cell Padding and Label Styles](https://developer.mescius.com/spreadjs/docs/features/cells/cellpadding#site_main_content-doc-content_title "https://developer.mescius.com/spreadjs/docs/features/cells/cellpadding#site_main_content-doc-content_title").
![gif11](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/gif11.d93de3.gif?width=800)

### Edit in the Customize Theme Font Dialog

Learn more about [Customize Theme Font](https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/customizations/create-and-customize-page-layout-themes#theme-fonts "https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/customizations/create-and-customize-page-layout-themes#theme-fonts").
![7.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/7.8050e5.gif?width=500)

## Configure for Other Elements

Similar to the two methods previously mentioned, you can select or input in any text field that supports font family adjustments.

### **Chart**

Learn more about [Charts](https://developer.mescius.com/spreadjs/docs/features/Charts#site_main_content-doc-content_title "https://developer.mescius.com/spreadjs/docs/features/Charts#site_main_content-doc-content_title").
![8.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/8.9ad789.gif?width=800)

### **Shape**

Learn more about [Shapes](https://developer.mescius.com/spreadjs/docs/features/UnderstandingShapes#site_main_content-doc-content_title "https://developer.mescius.com/spreadjs/docs/features/UnderstandingShapes#site_main_content-doc-content_title").
![9.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/9.28958c.gif?width=600)

### **Barcode**

Learn more about [Barcodes](https://developer.mescius.com/spreadjs/docs/features/WorkingwithBarcodes#site_main_content-doc-content_title "https://developer.mescius.com/spreadjs/docs/features/WorkingwithBarcodes#site_main_content-doc-content_title").
![10.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/10.d9c1e3.gif?width=600)

### **Data Chart**

Learn more about [Data Charts](https://developer.mescius.com/spreadjs/docs/features/data-charts "https://developer.mescius.com/spreadjs/docs/features/data-charts").
![11.gif](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/11.a1ffaf.gif?width=800)