Introduction
This tutorial will demonstrate how to install new fonts in joget
Implementation
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
#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 the form
If you want to implement this font inside a form, you may also do so in 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
