Set Default Font Size Upon Page Load

Introduction

In this guide, you'll learn how to change the default font size of your application upon page load in Joget. By default, the font size is set to 13px, but this article will show you how to adjust it to a different size using custom CSS and JavaScript.

How does it work?

Joget provides three font size options at runtime: Small (13px), Medium (17px), and Big (20px). Modifying the theme's CSS and injecting JavaScript allows you to change the default font size to either Medium or Big when the application loads.

Prerequisites

Ensure that the "Enable Font Size Control?" option is enabled in your app. For this, go to UI Builder > Settings > Configure Layout > Configure <theme> > Advanced.

Steps to Implement:

Modify the default font size

The default font sizes are Small (13px), Medium (17px), and Big (20px). To change the default font size, add the following CSS code in UI Builder > Settings > Configure Layout > Configure "<theme>" > Advanced > Custom CSS.

The idea is to overwrite the values in the class defined by the theme itself. However, there's a limitation that this modification only affects fonts that are controlled by the font-size controller. Thus, it is skipped for fonts such as the content title.

You may change the font size and line height according to your requirements. You may also add any additional properties as you wish.

• For Medium Font Size
  

  .mediumFontSize #form-canvas *, .mediumFontSize .fc-view-container *, .mediumFontSize .userProfile-body-content *, .mediumFontSize .dataList *, .mediumFontSize .ui-html *:not(h1):not(h2):not(h3):not(h4):not(h5){
      font-size:30px !important;
      line-height: 40px !important;
  }

• For Big Font Size
  

  .largeFontSize #form-canvas *, .largeFontSize .fc-view-container *, .largeFontSize .userProfile-body-content *, .largeFontSize .dataList *, .largeFontSize .ui-html *:not(h1):not(h2):not(h3):not(h4):not(h5){
      font-size:30px !important;
      line-height: 40px !important;
  }

Set default font on page load

To automatically set the font size to Big (or Medium) upon loading the page, insert the following JavaScript code in UI Builder > Settings > Configure Layout > Configure "<theme>" > Advanced > Custom JavaScript:

$(function(){
    setTimeout(function(){
        $('#bigFont').click();
    },250)  // we give it a delay (in ms) to allow for all the DOM elements and listeners to load properly
});

The code simulates a click of the large font size icon as soon as the page loads.

Expected outcome

After following these steps, your application's font size will automatically adjust to the specified size (Medium or Big) when the page loads, providing a consistent user experience.

Download sample app