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.

1. In the navigation pane of Dev Studio, click Records.
2. Expand the Technical category, and then click Text File.
3. From the list of files, open pyC11nCustomFonts.css.
4. In the text field, enter the reference to the new font by referencing the examples in the comment section of the file.
   For example: In this scenario, you reference a RobotoBlack font in an uploaded file named RobotoBlack.woff2.

   @font-face {
     font-family: 'RobotoBlack';
     src: url('webwb/RobotoBlack.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
   }

5. On the file form, click Save.
6. In the header of your workspace, click the Switch Studio menu, and then click App Studio.
7. In the navigation pane of App Studio, click SettingsBranding and themes.
8. Create the theme in which you want to use the new font.
   For more information, see Defining themes.
9. In the Font family field, select Other.
10. In the Font family name field, enter the name of the font that you defined in the font-family line of the pyC11nCustomFonts.css file.
    For example: Enter RobotoBlack.

1. In the header of Dev Studio, click CreateTechnicalBinary File.
2. On the Create Binary File tab, in the Label field, enter a name for your font.
3. In the App Name (Directory) field, enter the name of the folder that contains your font file.
   For example: Enter webwb.
4. In the File Type (extension) field, enter woff2.
5. Click Create and Open.
6. On the Edit Binary File form, click Upload file.
7. In the Upload file window, click Choose file, select the font file, and then click Upload file.
8. Click Save.
9. 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.
   For example: You can upload fonts as MyFontNameBold.woff2 and MyFontNameLight.woff2.
   A TTF file contains one font weight only.