Install New Fonts in Joget

Introduction

This tutorial will demonstrate how to install new fonts in Joget DX.

Prerequisites

• A custom font file.
• An existing app.

Preparations

1. Prepare a font file and an app for this tutorial. Click the Pencil icon of the app in the App Center to open the App Composer.
   
2. Click Resources from the Quick Navigator on the left.
   
3. Click Add Resource.
   
4. Click Choose File.
   
5. Select the font file.
   
6. Click Upload. 
   
7. Click on the uploaded font file from the table in the Resources.
   
8. Copy the Hash Variable and close the window.
   
9. The Hash Variable, based on the above screenshot, would look something like this: 
   #appResource.Tuna_Sandwich.otf#

Implement Custom Fonts for Joget Platform

1. Copy the CSS code below. Then, in the line that contains #appResource.placeholderFont.otf# on line 3, replace that text with the Hash Variable you copied earlier (e.g., #appResource.Tuna_Sandwich.otf#)
   

   @font-face {
       font-family: "Academy Engraved LET";
       src: url("#appResource.placeholderFont.otf#");
   }
   * { font-family: "Academy Engraved LET", serif; }

2. Click the Quick Edit at the bottom right corner.
   
3. Navigate to Settings > System Settings > General Settings, and paste the CSS code in Custom CSS.
   
4. Click Submit to save the changes.
   

Implement Custom Fonts for an App

1. Navigate to the App Composer and click a form from the Form Builder.
   
2. Click on an element from the form and navigate to Styles > Styling > Default Mode > Custom and paste the CSS code inside Custom. 
   
3. Click Apply Change to apply the changes.
4. Click Save to save the changes.

Expected outcome

Once the custom font has been implemented in General Settings, the font for the platform will change.

Once the custom font has been implemented in Form Builder, the font for the element will change, and the changes are reflected in the Form Builder and UI.

Download sample app