Skip to main content

Adding a new web font

The Pega design system uses the Open Sans web font. This font is available if you use UI-Kit or Theme-Cosmos. 

To use different web fonts, perform the following steps:

  1. Create a rule-file binary for the woff2 and woff web font files for each font-weight. For example, to support Regular, Bold, and ExtraBold, you need to upload six files:
  • webwb/MyNewFont-Regular.woff2
  • webwb/MyNewFont-Regular.woff
  • webwb/MyNewFont-Bold.woff2
  • webwb/MyNewFont-Bold.woff
  • webwb/MyNewFont-ExtraBold.woff2
  • webwb/MyNewFont-ExtraBold.woff
Note: There is no need to upload an EOT, SVG, or TTF file. WOFF2 and WOFF will work for all supported browsers (IE11 is the only browser to use WOFF, modern browsers use WOFF2).
  1. Create a new CSS rule-file text and attach the rule to your skin as an additional file.
  2. Edit the file to load the new font.
example of font file to use
Note: If you are using Pega 8.3 or lower, you will need to add a question mark after each file. For example 
  @font-face {
  font-family: "MyNewFont";
  src:url("webwb/MyNewFont-ExtraBold.woff2?") format("woff2"),
  url("webwb/MyNewFont-ExtraBold.woff?") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display : swap;
}
  1. In your application skin, in the Base settings tab, change your Overall font to other... and enter the name of the new font-family as defined in the file above.
Change the base font to other

Check your knowledge with the following interaction.

If you are having problems with your training, please review the Pega Academy Support FAQs.

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