Introduction

This tutorial will demonstrate how to install new fonts in joget

Getting Started

Custom fonts throughout the whole App

Firstly, download your desired font file. Upload your custom font file in Your Joget App (App Composer) > Resources > Add Resource and upload your font file.

Figure 1: App Resource


After uploading the font file, click on the resource to obtain the hash variable of the font. You can then reference the font file using its generated hash variable, which looks like this.

#appResource.yourNewFontHere#.



Figure 2: Resource file hash variable

Now you can specify this custom CSS as App global CSS in your general setting for the whole app:

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


It will look something like this:

Figure 3: Custom CSS

Custom fonts inside a form

To implement this font inside a form, configure the styles section of the form, see Figure 4.

Styles --> Styling --> Default Mode --> Custom

Figure 4: Custom font inside form

It will look something like this


Download the Sample App

APP_kb_dx8_InstallingFontsInJoget.jwa


  • No labels