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 and click Open.
   
6. Click Upload. 
   
7. Click on the uploaded font file from the table in the Resources.
   
8. In this window, you’ll see two important fields, the URL and the Hash Variable.
   
   
   • URL: This link can be used outside of the app, such as in other systems.
   • Hash Variable: This value can be used only within the app, for example, in the Form Builder, List Builder, or UI Builder.

Implement Custom Fonts for the 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 URL  (e.g., /jw/web/app/kb_dx8_installingFontsSampleApp/resources/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. Drag a Custom HTML element into your form, click on it to open the properties, and paste the following code inside Custom HTML:
   
3. Paste the following code into the Custom HTML field:
   

   <style>
   @font-face {
       font-family: "Academy Engraved LET";
       src: url("#appResource.placeholderFont.otf#");
   }
   </style>

   Replace #appResource.placeholderFont.otf# with the actual Hash Variable of your font (for example: #appResource.Tuna_Sandwich.otf#).
4. Click Apply Change to save the update. You can now use this font in any field within the form.
5. Drag a Text Field element into your form, then click on an element from form and navigate to Styles > Styling > Default Mode > Custom.
   
6. Paste this code in the Custom:
   

   font-family: "Academy Engraved LET";

   

7. Click Apply Change to update the field.

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