How to Match Report Design and Preview Font

Introduction

In this guide, you will learn how to match the font between the report design and the preview in Joget Report Builder. This issue arises when the fonts used in the report design do not appear the same in the preview or print.

• Font mismatch between design and preview

Get started

Before beginning, ensure that you have the necessary permissions to edit and preview reports in Joget Report Builder.

How to use it

1. Drag an HTML Report Element into the report design.
2. Paste the following CSS code into the HTML report element to synchronize the fonts between design and preview.
   

   <style type="text/css">
   .canvas-body, .report_body {
     font-family: 'Courier Prime', monospace;
     font-style: italic;
   }
    
   @media print {
     * {
     font-family: 'Courier Prime', monospace;
     font-style: italic;
     }
   }
   </style>

   You can modify the font-family to match your desired style.

   Note:
   .canvas-body refers to the report builder design.
   .report_body refers to the report builder preview.
   @media print applies the font styles to the print and PDF previews.
   

Expected outcome

After following the steps, the fonts in your report design and preview will appear consistent, ensuring that the final output reflects your design intentions.