Customizing fonts for your PEGA Application

User Experience Knowledge Share
, ,
1
  • Choose the font from https://fonts.google.com/
  • Select the font you want to use.
  • Download All
  • Your font will be downloaded as Zip file
  • Extract the Zip file
  • You will find fonts in TTF Format as below,
  • Select the TTF file which you want to convert to WOFF2
  • Use this site for converting https://www.fontconverter.io/en/ttf-to-woff2
  • Upon converting, you will have the option to download,
  • Download the Zip file
  • Extract the Zip, The Zip will contain TTF,WOFF2,CSS file.
  • In the header of Dev Studio, select Create > Technical > Binary File to create binary files.
  • In the App Name (Directory) field, enter webwb.
  • In the File Type (Extension) field, enter the corresponding font format (.ttf, .woff, or .woff2)
  • Create and Open
  • In the File controls section, click Upload file and select the corresponding font file (woff2).
  • Save
  • Open Application Definition — Under Presentation you will find the skin which application is referring to
  • Select the Skin in which you want to make changes
  • In the Skin rule form, Select the Included styles tab
  • In the Additional style sheets section, click + Add style sheet
  • Create and open, upload the CSS file you have created
  • Return to the Skin rule form and click Mixins
  • In the Typography section, click General
  • In the Font family list, select other
  • Enter the font
  • Click Save
  • Check your UI
2

To customize fonts in your Pega application, first download your chosen font from Google Fonts and convert the required TTF file into WOFF2 format using an online converter. Upload the WOFF2 file as a binary file in Dev Studio under the webwb directory with the correct extension. Then open your application’s skin rule from the Application Definition and add the provided CSS file in the Included styles section. Next, go to the Mixins tab and update the Typography settings by selecting “other” in the font family and entering your custom font name. Save the changes and ensure the skin is applied to your application. Finally, refresh your UI to see the new font reflected across the application.

1 Like