How to Use Custom Fonts in JavaScript Reports

Fonts are as important for reports as they are for website design. They directly affect user experience. Many multilingual sites that support RTL and LTR languages use multiple fonts, and report designers use them in their reports. Fonts can be challenging to use in web environments because there are so many fonts that are not available on all web platforms.

For any content to be displayed properly in the browser (in all platforms) developers must ensure that the fonts exist on the target client. ActiveReportsJS introduces an easy way to bundle font references within the report to ensure a smooth error-free rendering of the report.

Design Reports with Custom Fonts

When designing a report, select the “Font Family” property of a control to see the available fonts for your report. Fonts listed in the dropdown are supported by default.

Install Fonts

If the font you want to use is installed on your machine, skip this step. If not, download and install the font file. Each OS has its own set of fonts, and you can add more.

• Windows: Navigate to Settings > Personalization > Fonts
• MacOS: Open Font Book application
• Linux: Use Command line to manage fonts

The most common font file types supported by web browsers are OTF, TTF & WOFF. Choose one of these for reliable support for your web application.

Add Fonts to Designer

The ActiveReportsJS designer supports a set of fonts listed in the fontsConfig.json file. This file is installed with the designer. Update the file with your own font entries to use in the designer with your reports.

Find this file in these locations:

• Windows: \AppData\Roaming\ActiveReportsJS Designer\
• MacOS: /Library/Application Support/ActiveReportsJS Designer/
• Linux: /.config/ActiveReportsJS Designer/

Update the file with the new font name and file path.

{  
    "path": "",  
    "descriptors": [  
               {  
                       ...  
               },  
        {  
            "name": "Webdings"  
        }  
    ]  
}

Close and reopen the ActiveReportsJS designer. Select the “Font Family” property for a TextBox control, and the newly added font appears in the dropdown.

Now you can design reports with the new font.

Deploy JavaScript Reports with Custom Fonts

Each browser has its own set of supported fonts. When a custom font is not available, the browser uses a different one. This creates inconsistency across browsers. Making custom fonts available for web applications solves this problem. We outline the steps below.

Add Fonts

Add the font file to your application. You can configure the file to load and cache when the application is loaded, or load the file on demand when it is needed. There are tradeoffs with each approach.

Register Fonts

Each font must be registered with the ActiveReportsJS component in the application before the report can be opened. Create a JSON object for each font you want to use.

Each entry should include these fields:

• name: Name of the font
• locals: List of fonts (The application will look for these fonts locally first.)
• source: URL to font source

In this example, the font files are stored in the fonts/ folder.

const fonts = [  
    {  
        name: 'Webdings',  
        locals: ['webdings'],  
        source: 'fonts/webdings.ttf'  
    },  
    {  
        name: 'Gunplay',  
        locals: ['gunplay'],  
        source: 'fonts/gunplay.ttf'  
    }  
];

Use the registerFont method and pass the fonts code above as an argument.

...  
        viewer.registerFont(...fonts);  
        viewer.open('report/my-custom-font-report.rdlx-json');

The code above loads the fonts for the viewer and then opens the report.

Export Fonts

You can export your reports with custom fonts to HTML and Excel. PDF format is currently not supported.

Tradeoffs of Using Custom Fonts

While using custom fonts in JavaScript can add the look you need, there are some drawbacks.

• Increased application size, and slower downloads:
• Adding fonts to your application or large report files will increase the application bundle size. Larger bundles have longer initial download times for SPA applications. With ActiveReportsJS, fonts are cached and the performance issue would only be evident on the first run of the report.
• Increased report rendering times:
• Fonts must be registered before a report is rendered, adding an additional step. If the fonts are loaded dynamically from a remote source, the network could contribute to slower rendering times.

Drawbacks can be mitigated, but these are key performance aspects of your application and should be carefully considered.

See the Performance Demo for a guide on report sizes, rendering times, and general reporting performance.

Using custom fonts in your reporting applications improves report quality and makes them more accessible. Just keep in mind the performance costs. Addressing them properly makes this a worthwhile endeavor, and dramatically increases readability for your users.

by Troy Taylor

Originally published at https://www.grapecity.com on June 24, 2020.