Notebook
UI Builder: Change Font Family
Purpose: How to change the font family of text in a Portal Experience in ServiceNow UI Builder. This procedure will allow the use of custom fonts in UI Builder Portal Experiences.
- Open Experience’s UI Theme record
- In UX Theme Asset related list, click “New”
- Complete the UX Theme Asset form as follows:
- Asset: Create a new UX Theme Asset record as follows:
- Category: Font
- Name: any text
- Attachments: Attach the font file (.ttf, .eof, .woff, etc) to the UX Theme Asset record
- Note: Only a single .ttf file extension has been tested so far
- Asset Properties: leave blank
- Asset: Create a new UX Theme Asset record as follows:
- Click “Submit”
- In the UX Theme record’s Theme field, change the JSON to add a font-family based CSS Custom Property whose value matches the UX Theme Asset record’s Name field such as:
{ "--now-font-family": "Julius Sans One" }
- Click “Update”
- Test the page to see the font changed