Customizing fonts for your Pega application

Pega Platform™ supports importing web fonts for use in your Pega application.

You might want to import a new web font into your Pega application if the standard Pega font set does not include an icon required for your application, or if you must maintain consistency in accordance to your company style guide for your customer-facing interface of your application, or if your designs require a specific typography that is incompatible with Pega application defaults fonts.

Pega Platform supports implementing custom web fonts for different purposes using different file formats. Most modern browsers use .woff2. Internet Explorer 11 exclusively uses .woff. Mobile clients must implement the .ttf (TrueType) version of web fonts.

  1. Download the respective binary files for the fonts that you want to add to your skin from an online font repository. Ensure that you download at least the .woff version of the fonts.
  2. Using a text editor, create a text file for use as the custom cascading style sheet (CSS).
  3. In the CSS text file, add a font-face snippet by using the following format:
    For example: For Pega Platform 8.4 and later: src: (webwb/fontName.fontformat)

    For Pega Platform 8.3 and earlier: src: (webwb/fontName.fontformat?)

    1. Enter the source URL element. Only add the src element for the first font definition.
      For example: src: url
    2. Enter the directory of the imported font.
      For example: (webwb/
    3. Enter the font name.
      For example: newFontNormal
    4. Enter the font file type. This is the same as the font format.
      For example: .woff)
    5. Define the font format.
      For example: ('woff')
    6. Return to step 3a. as needed to define each font that you want to add to your Pega application.
      Use the same font family for all the types of fonts; otherwise Pega Platform cannot recognize them.
      For example: A complete font-face snippet.
      Note: For Pega Platform 8.3 and earlier, include the question mark (?) in the URL element.
      @font-face {
   font-family: newFontNormal;
   src: url(webwb/newFontNormal.woff2) format ('woff2'), 

url(webwb/newFontNormal.woff) format ('woff'),

url(webwb/newFontNormal.ttf) format('ttf'),

font-weight: normal; 

font-style: normal;

}
  4. Upload the fonts to Pega Platform:
    1. In the header of Dev Studio, select Create > Technical > Binary File to create binary files for the .ttf, .woff, or .woff2.
    2. In the App Name (Directory) field, enter webwb.
    3. In the fields located under the Context section, select the application and ruleset to which the skin you want to edit belongs.
    4. Click Create and open.
    5. In the File controls section, click Upload file and select the corresponding font file.
    6. Click Save.
    7. Repeat step 4a. as needed to create binary files for each corresponding .ttf, .woff, or .woff2 files you want to add to Pega Platform.
  5. Upload the CSS file to the skin for the Pega application:
    1. In the navigation panel of Dev Studio, click Records > Application.
    2. In the Presentation section, in the Skin field, click the properties icon.
    3. Select the application into which you want to upload the custom fonts.
    4. In the Skin rule form, click the Included styles tab.
    5. In the Additional style sheets section, click Add style sheet.
    6. To the right of the new empty field, click the properties icon.
    7. In the label field, enter a short description for the new style sheet.
    8. In the fields located under the Context section, select the application and ruleset to which the skin belongs.
    9. Click Create and open.
    10. Click Upload file and select the new CSS file that you created.
    11. Click Save.
  6. Return to the Skin rule form and click Mixins.
  7. In the Typography section, click General.
  8. In the Font family list, select other.
  9. Click Save.
  10. When the user portal opens, confirm that the skin displays the custom font.