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.

To incorporate custom web fonts into Pega Platform for use in your Pega application, perform the following procedure:

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 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.
      Example: src: url

   2. Enter the directory of the imported font.
      Example: (webwb/ 

   3. Enter the font name.
      Example: newFontNormal

   4. Enter the font file type. This is the same as the font format.
      Example: .woff)

   5. Define the font format.
      Example format: ('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.

Example of a font-face snippet:

@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 File Type (Extension) field, enter the corresponding font format (.ttf, .woff, or .woff2).

   4. In the fields located under the Context section, select the application and ruleset to which the skin you want to edit belongs.

   5. Click Create and open.

   6. In the File controls section, click Upload file and select the corresponding font file.

   7. Click Save.

   8. 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.
   The rule form displays the font family name in the Font family name field.

9. Click Save.

10. When the user portal opens, confirm that the skin displays the custom font.

For more information about importing web fonts, see the following topics:

• Uploading custom font files
• Using custom webfonts in your Pega 7 application
• Importing Fonts into Pega7