Customizing fonts for your PEGA Application

  • 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