Skip to main content

Table of Contents

Adding custom fonts to a Cosmos React theme

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.

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 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.

    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 Settings Branding 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.

    Enter RobotoBlack.
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 Create Technical Binary 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.

    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.

    You can upload fonts as MyFontNameBold.woff2 and MyFontNameLight.woff2.
    A TTF file contains one font weight only.
Add the new font CSS to the skin of your application. For more information, see Creating a CSS font file.
Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us