# Managing Custom Fonts

ThemeBuilder provides convenient ways to add and manage your preferred custom fonts and icon fonts so you can use them when customizing Telerik and Kendo UI components.
To add or customize fonts, you need a [ThemeBuilder license](https://www.telerik.com/themebuilder/documentation/introduction#themebuilder-pro-free-trial).

> tip Hosted fonts are currently not supported.

## Adding Custom Fonts

1. Open an existing ThemeBuilder project and select **Project Settings** from the toolbar.

2. In the **Project Settings** dialog, select the **Fonts** tab.

3. In the **Fonts** tab, select **Upload Font**.

    <img src="/themebuilder/documentation/assets/c2a8d8eae052a457bcab79ae9f16ad03/web-app-custom-font-upload.png" alt="ThemeBuilder custom fonts dialog" style="width: 1024px;"/>

4. Add the font files that you want to use in your project. The supported file extensions are TTF, OTF, EOT, WOFF, and WOFF2.

    <img src="/themebuilder/documentation/assets/8cca60d29eb17360e9543a5b4c2d1554/web-app-custom-font-properties.png" alt="ThemeBuilder custom font properties" style="width: 1024px;"/>

5. Set the **Font Name**—this name appears in the **Font Family** drop-down. You can assign the same **Font Name** to multiple uploaded fonts so browsers can load the best match for specific font metadata configurations.

6. Select the **Font Type**:

   * **Typeface**—Use this font type to add a custom font family. Note that you can use EOT and WOFF2 font file types only as typeface fonts.
   * **Icon**—Use this font type to add custom icon fonts.

7. Optionally, set the font's metadata—**Font Weight**, **Font Style**, and **Font Display**. These options will be applied when using the font.

   > tip When you upload several fonts with the same **Font Name** and different metadata configurations, browsers use the font that best matches the applied font CSS styles.

8. Select the check button to add the font.

    <img src="/themebuilder/documentation/assets/5460aa1b8e5b8340e0896933154dd825/web-app-custom-font-uploaded.png" alt="ThemeBuilder custom font uploaded" style="width: 1024px;"/>

## Accessing Your Custom Fonts

Once you add a custom font, it appears in the **Font Family** editor drop-down, and you can use it like any other font.

In ThemeBuilder, you can access your custom fonts in several ways:

* The **Project Settings** button in the [Toolbar](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#themebuilder-toolbar)—provides quick access to your project settings, where you can find a tab with your custom fonts at any stage of the customization process.
* The **Font Family** editor under the **Text** node in the **PROPERTIES** pane—provides access when customizing a component's text properties.
* The **Typographies** section under **THEME STYLES**—provides access to the **Font Family** editor when creating or editing typography variables.

## Editing Your Custom Fonts

1. Open an existing ThemeBuilder project and select **Project Settings** from the toolbar, then choose the **Fonts** tab.

2. In the **Uploaded Fonts** list, select the edit button to customize a previously added font.

3. Update the desired font parameters.

    <img src="/themebuilder/documentation/assets/5b7285d4acaa52fec8afe1988448b7a7/web-app-custom-font-edit.png" alt="ThemeBuilder custom font edit" style="width: 1024px;"/>

4. Select the check button to save the changes.

## Deleting Your Custom Fonts

1. Open an existing ThemeBuilder project and select **Project Settings** from the toolbar, then select the **Fonts** tab.

2. In the **Uploaded Fonts** list, select the delete button to remove a font.

    <img src="/themebuilder/documentation/assets/aac671cc5829f24c49b64e0fbe02d5f6/web-app-custom-font-delete.png" alt="ThemeBuilder custom font delete" style="width: 1024px;"/>

3. Select **Delete** to confirm the action.

   > tip You cannot delete a font that is already in use. To delete the font, first replace it with another font in all variables or components where it is used.

* [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)
