Upload a custom font to your theme

---
title: Upload a custom font to your theme
description: Upload and preview up to 10 custom font families and an unlimited number of associated font faces in your Theme Builder theme.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/platform-user-interface/upload-custom-font.html
release: brazil
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 2
keywords: [theme builder, custom font, upload custom font, upload font]
breadcrumb: [Global styles, Manage or edit a theme, Configuring Next Experience with Theme Builder, Working with themes, Configure, Next Experience UI, Configure UIs and portals, Configure user experiences]
---

# Upload a custom font to your theme

Upload and preview up to 10 custom font families and an unlimited number of associated font faces in your Theme Builder theme.

## Before you begin

Role required: ui\_builder\_admin

For information on granular roles, see [Granular admin roles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-security/granular-admin-roles.md).

## About this task

A font family is a grouping of fonts that share a common design and may include different font faces, like regular, bold, or italic. For example, Arial is a font family and within the Arial font family you may find font faces such as Arial Regular, Arial Bold, and Arial Italic.

Upload only one font family at a time. Theme Builder does not support variable type fonts.

**Note:** Only upload a font that you're licensed to use.

You can also watch a short video on how to upload a custom font to your theme.

\[Omitted video\] Description: Upload a custom font to your theme.

## Procedure

1.  Navigate to **All** > **Now Experience Framework** > **Theme Builder**.

    The Theme Builder landing page appears in the Home page view.

2.  Use the Page drop-down list to select the Editor page view.

    \[Omitted image "tb-editor-page-list.png"\] Alt text: Page drop-down list with Editor selected.

3.  From the Theme drop-down list located in the header bar, select the theme that you want to edit.

    The **Global styles** tab opens automatically with the Overview panel displayed.

    \[Omitted image "tb-editor-page-view.png"\] Alt text: Example view of the Editor page.

4.  From the Overview panel, navigate to the Typography section and select **Add custom font family**.

    \[Omitted image "tb-overview-add-custom-font.png"\] Alt text: Overview panel Typography section with Add custom font family selected.

    The Add custom font family modal appears.

5.  Use one of the following options to upload your custom font family:

    -   Select **Browse**, choose your custom font family file from your computer's file browser, and select **Open**.
    -   Drag your custom font file from your computer's file browser and drop the file directly into the modal.
    **Note:** The file must meet the following requirements to be saved.

    -   Under 2 MB
    -   WOFF, TTF, or ZIP format
    \[Omitted image "tb-custom-font-modal-browse.png"\] Alt text: Add custom font family modal with Browse selected.

6.  Use the arrow within the modal to view any font faces you have uploaded with your custom font family.

    **Note:** Font faces can be applied individually to components, while the font family is applied globally.

    \[Omitted image "tb-custom-font-family-modal-arrow.png"\] Alt text: Add custom font family modal preview pane with one font face displayed and arrow to view additional font faces highlighted.

7.  Select **Save**.


## Result

Your new font family appears in the Typography section under **Manage custom fonts**, along with the associated font faces. The most recently added font family appears at the bottom of the **Manage custom fonts** list.

## What to do next

After you upload your custom font, you can select it as your default font and apply it to your theme. See [Edit your default font](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/edit-font.md).

-   **[Add a font face](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/add-font-face.md)**  
Add a new style such as bold or italic to your custom font family in Theme Builder.
-   **[Delete a custom font from your theme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/delete-custom-font.md)**  
Delete and remove a custom font family or font face you no longer need from your Theme Builder theme.

**Parent Topic:**[Working with Global styles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/working-with-global-styles.md)