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 looks similar to the following syntax.
   

   #appResource.yourNewFontHere#.

Implement Custom Fonts for Joget Platform

1. Copy the following CSS and replace the Hash Variable inside with the previously copied Hash Variable.
   

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

2. Click the Pencil Icon at the bottom right corner.
   
3. Navigate to Settings > System Settings > General Settings, and paste the CSS 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.
   
3. Paste the CSS inside Custom.
   
   
4. Click Apply Change to apply the changes.
5. 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