Using Custom Fonts and Icon Fonts

Once you add a custom font, it appears in the Font Family editor dropdown, and you can use it as 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 allows you to scale any future updates in the styling of the components. Whenever possible, always use variables instead of hard-coded values for the properties of the UI components.

2. Select Advanced Edit to enable the drill down into the properties of the UI components.

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 icons 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 allows you to scale any future updates in the styling of the components. Whenever possible, always use variables instead of hard-coded values for the properties of the UI components.

2. Select Advanced Edit to enable the drill down into the properties of the UI components.

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