Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adding custom fonts to a Cosmos React theme

Updated on May 6, 2021
Applicable to Cosmos React applications

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.

Before you begin: If you want to use a binary file as a source, upload the .woff2 file to Pega Platform. For more information, see Uploading custom font files.
  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.
Result: The new font is now available for use in the theme.

Uploading custom font files

Applicable to Cosmos React and Theme Cosmos applications

Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.

In Pega Platform, you store font files as binary files.
  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.
What to do next: Add the new font CSS to the skin of your application. For more information, see Creating a CSS font file.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us