Add a font face

---
title: Add a font face
description: Add a new style such as bold or italic to your custom font family in Theme Builder.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/platform-user-interface/add-font-face.html
release: brazil
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 2
keywords: [theme builder, add font face, font face]
breadcrumb: [Upload custom font, 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]
---

# Add a font face

Add a new style such as bold or italic to your custom font family in Theme Builder.

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

**Note:** Upload a custom font family before adding individual font faces. This ensures each style is correctly grouped under its font family.

## About this task

Font faces are applied individually to components, as needed. Theme Builder does not yet support variable type fonts.

## 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, 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.  Under **Manage custom fonts**, locate and expand the font family where you want to add a font face.

    **Note:** You can also add the font face directly from the Typography panel.

    \[Omitted image "tb-typography-icon.png"\] Alt text: Global styles Typography panel.

5.  From the **Add font face** field, select the Plus sign.

    \[Omitted image "tb-plus-icon.png"\] Alt text: Add font face field with Plus sign highlighted.

    The Add font face modal appears.

6.  Select **Browse**, choose your font face file from your computer's file browser, and select **Open**.

    Alternatively, drag your font face file from your computer's file browser and drop the file directly into the modal.

    **Note:** Make sure that the font face meets the following guidelines or the file isn’t saved.

    -   Under 2 MB
    -   WOFF, TTF format
7.  Select **Save**.

    The new font face is displayed under your custom font family.


## Result

Now that you have added a font face, [you can apply it to individual components for more precise styling](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/tb-edit-components.md). For information on deleting a font family or font face, see [Delete a custom font from your theme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/delete-custom-font.md).

**Parent Topic:**[Upload a custom font to your theme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/platform-user-interface/upload-custom-font.md)