Ensure that the UI meets the branding requirements of your business by adding custom fonts to your application. In Cosmos React, you can add a font by referencing an external URL source or by uploading a binary file with the font to Pega Platform.
- In the navigation pane of Dev Studio, click Records.
- Expand the Technical category, and then click Text File.
- From the list of files, open
- In the text field, enter the reference to the new font by referencing the examples in the comment section of the file.
- On the file form, click Save.
- In the header of your workspace, click the Switch Studio menu, and then click App Studio.
- In the navigation pane of App Studio, click .
- Create the theme in which you want to use the new font.For more information, see Defining themes.
- In the Font family field, select Other.
- In the Font family name field, enter the name of the
font that you defined in the
font-familyline of the
Uploading custom font files
- In the header of Dev Studio, click .
- On the Create Binary File tab, in the Label field, enter a name for your font.
- In the App Name (Directory) field, enter the name of the folder that contains your font file.
- In the File Type (extension) field, enter woff2.
- Click Create and Open.
- On the Edit Binary File form, click Upload file.
- In the Upload file window, click Choose file, select the font file, and then click Upload file.
- Click Save.
- Optional: To use other font weights that belong to the same text font family, repeat steps 1 through 8, and then upload font files for each
of the weights.A TTF file contains one font weight only.