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.

image

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

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

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

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

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

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

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.

7.gif

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.

8.gif

Shape

Learn more about Shapes.

9.gif

Barcode

Learn more about Barcodes.

10.gif

Data Chart

Learn more about Data Charts.

11.gif