Upload a custom font to your theme

  • Release version: Australia
  • Updated March 12, 2026
  • 2 minutes to read

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

    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, Ariel is a font family and within the Arial font family you may find font faces such as Ariel Regular, Ariel Bold, and Ariel Italic.

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

    Important:
    Only upload a font that you’re licensed to use. Depending on their size, custom fonts can inadvertently adjust the amount of text on the page. Always test and preview your fonts before publishing your theme to your instance.

    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.
      Figure 1. Page drop-down list
      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.
      Figure 2. Editor page view
      Example view of the Editor page.
    4. From the Overview panel, navigate to the Typography section and select Add custom font family.
      Figure 3. Overview panel Typography section
      Overview panel Topography section with Add custom font family selected.
      Note:
      You can also upload a font directly from the Typography panel.
      Figure 4. Typography tab
      Global styles Typography tab.
      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:
      Make sure that the font family file meets the following guidelines or the file isn't saved.
      • Under 2 MB
      • WOFF, TTF, or ZIP format
      Figure 5. Add custom font family modal with size and format limitations
      Add custom font family modal with Browse selected.
    6. Optional: 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.
      Figure 6. Add custom font family modal preview pane
      Add custom font family modal preview pane with one font face displayed and arrow to view additional font faces highlighted.
    7. Select Save.
      Your new font family appears in the Typography section under Manage custom fonts, along with the associated font faces.
      Figure 7. Typography section with Custom font family listed
      Typography section with new custom font family and font faces listed.
    8. Optional: Preview how your selected font family or font face appears using any of the following options.
      • Use the Abstract UI or Experience preview tabs on the main stage to view how your new font appears globally throughout your theme.
      • Open the preview modal by selecting the custom font family or font face name that you want to preview listed beneath the Manage custom fonts header.

    Result

    Once you have uploaded your custom font, you can select it as your default font and apply it to your theme. For information, see Edit your default font. The most recently added font family appears at the bottom of the Manage custom fonts list.