Converting the icons font for imported applications

Convert the font files that contain application icons to ensure that the mobile app displays properly with the Mobile - Slide Up layout when you do not add the latest UI Kit to your application stack.

Typically, when you upgrade Pega Platform or import applications that were created in previous Pega Platform releases, you change the UI Kit to the most recent version. However, you may choose not to upgrade to the latest UI Kit. For more information, see Performing application validation after upgrades.

  1. In the navigation panel of Dev Studio, click Records > Technical > Binary File.
  2. In the list of instances, filter out the instances of the woff file type, and open a binary file that corresponds to the font that your application uses.
    To determine the font that the application uses, you can display the CSS file of the skin rule that you selected for the application and look for a snippet of code that is similar to the following example: 
    @font-face {
    font-family: "UIKitIcons";
    src: url("webwb/uikit-icons.woff2?") format("woff2"), url("webwb/uikit-icons.woff?") format("woff");
}
    For more information, see CSS helper classes.
  3. In the Binary File form, click the Download file button, and download the .woff file.
  4. Obtain the values of two parameters that you provide to Pega Platform in the next procedure:
    • Determine and note down the path to the CSS file of the skin rule that you selected for the application, for example, webwb/py-icons.css.
    • Display the meta data of the font file by using a tool of your choice, and note down the value of the fontFamily parameter, for example uikit-icons.woff.
  5. Convert the .woff file to the TTF format by using a tool of your choice.
What to do next: Upload the font files to Pega Platform. For more information, see Customizing fonts for the native mobile app components.