Using Custom Fonts and Icon Fonts

Updated on Feb 13, 2026

Once you add a custom font, it appears in the Font Family editor drop-down, and you can use it like any other available font. To add or customize fonts, you need a ThemeBuilder license.

Using Custom Typefaces in ThemeBuilder

To change the typeface of the UI components:

1. (Optional) Add a new variable in the Typographies section of THEME STYLES by using the + button.

   This optional step helps you scale future updates to component styling. Whenever possible, use variables instead of hard-coded values for UI component properties.

2. Select Advanced Edit to enable drilling down into UI component properties.

3. Select the UI component that you will style.

4. In the COMPONENTS PARTS pane, select the part that contains text.

5. In the PROPERTIES pane, navigate to the Text section and update the properties of the text:

   • If you use variables, select the desired variable with your custom typeface.

   • If you use hard-coded values, select the Set Local Text Properties button and modify the text properties.

Using Custom Icon Fonts in ThemeBuilder

To use an icon font, your project must be configured for the Font Icons asset type.

To change the font icons of the UI components:

1. (Optional) Add a new variable in the Typographies section of THEME STYLES by using the + button.

   This optional step helps you scale future updates to component styling. Whenever possible, use variables instead of hard-coded values for UI component properties.

2. Select Advanced Edit to enable drilling down into UI component properties.

3. Select the UI component that you will style.

4. In the COMPONENTS PARTS pane, select the icon.

5. In the PROPERTIES pane, navigate to the Text section and update the icon:

   • If you use variables:

     1. Select the desired variable from the drop-down.
     2. To open the font icons dialog, select the settings wheel button.
     3. Click the desired icon and then Select.

   • If you use hard-coded values:

     1. Select the Set Local Text Properties button.
     2. Select the desired icon font from the Font Family editor drop-down.
     3. To open the font icons dialog, select the settings wheel button.
     4. Click the desired icon and then Select.

Related Articles

• Exploring the Component Properties
• Applying Advanced Customizations
• Creating a Unique Theme with Custom Fonts (Blog Post)