Edit Font Family

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'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.

Activate Font Control
- Place cursor within target cell(s).
- Ensure Font Family dropdown is visible.
Select Preferred Font
- Click the dropdown arrow to open the font list.
- Scroll to select the desired font.
- Click on the font name.

Method 2: Direct Text Input

Activate Font Control
- Place cursor within target cell(s).
- Ensure Font Family dropdown is visible.
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).

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

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).

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:

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
  ...
}

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.

Edit in the Padding Tab

Learn more about Cell Padding and Label Styles.

gif11

Edit in the Customize Theme Font Dialog

Learn more about Customize Theme Font.

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.

Edit Font Family