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.

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.

   Figure 1. Page drop-down list

   

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

   

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.

   Figure 3. Global styles Topography panel

   

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

   Figure 4. Add font face

   

   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. For information on deleting a font family or font face, see Delete a custom font from your theme.