# Using Custom Fonts and Icon Fonts

Once you [add a custom font](https://www.telerik.com/themebuilder/documentation/building-visual-styles/managing-custom-fonts), 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](https://www.telerik.com/themebuilder/documentation/introduction#themebuilder-pro-free-trial).

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

   > tip 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](https://www.telerik.com/themebuilder/documentation/basic-project-operations/creating-new-projects#changing-the-telerik-and-kendo-ui-project-assets-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.

   > tip 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](https://www.telerik.com/themebuilder/documentation/building-visual-styles/component-properties)
* [Applying Advanced Customizations](https://www.telerik.com/themebuilder/documentation/building-visual-styles/apply-advanced-customizations)
* [Creating a Unique Theme with Custom Fonts (Blog Post)](https://www.telerik.com/blogs/creating-unique-theme-custom-fonts-icons-themebuilder)