How to Use Custom Fonts in JavaScript Reports

Fonts play a large part in the visual representation of JavaScript applications and web-based reports. By default, JavaScript allows developers to customize things like font size, weight, and style and even include custom font types. The ability to work with and customize fonts allows developers to enhance both the aesthetic and readability of the information that they’re presenting.

To match JavaScript's flexibility, ActiveReportsJS allows users to heavily customize the text within reports. In this article, we’ll focus on how to leverage the ActiveReportsJS Designer’s ability to customize fonts, covering the following topics:

• The Basics of Fonts
• Configuring the Standalone Designer Application
• Configuring ActiveReportsJS-based Applications
• Configuring the Report Designer Component

If you’d like to follow along with the steps in this article, you can download your ActiveReportsJS free trial here.

The Basics of Fonts

All ActiveReportsJS components operate within a web browser environment:

• The Standalone Report Designer is built with Electron, which uses Chromium to display the user interface.
• The JavaScript Report Viewer and Designer components are parts of a web application that runs in the browser on a user’s machine.
• PDF, Tabular Data, and HTML Export Filters use a web browser environment to measure report content.

A typical report consists of textual content that the browser renders using shapes called glyphs. Font resources contain information that maps character codes to glyphs representing these characters. Therefore, browsers need access to font resources to display text as expected.

All textual content in ActiveReportsJS has several font properties, including:

• Font Family: The font ID, i.e., Arial, Calabri, or Times New Roman.
• Font Style: Normal or Italic.
• Font Weight: Thin, Extra Light, Normal, Medium, SemiBold, Bold, Extra Bold, or Heavy.

A unique combination of these three properties is called a Font Face. A font family typically consists of several font faces, which are (normally) represented by several files. For instance, the Calibri font family has six different font faces:

When ActiveReportsJS renders a report, it translates these font properties to font-family, font-style, and font-weight CSS style properties. It relies on a browser to resolve associated font resources and extract required glyphs. The browser has two ways to access font resources; locally, on the system a browser runs, or by download.

Downloadable font resources are easy to maintain; all modern browsers support them, and it guarantees the consistent output of textual content across all environments. Besides, the ActiveReportsJS PDF Export requires downloadable fonts because it embeds their subsets in a PDF document. Therefore, the best way to ensure consistent report output across all environments is to configure ActiveReportsJS components to access downloadable font resources.

Before we get started, we need to decide which font families we want to use for our reports. We could use standard fonts, like Arial, Times New Roman, Helvetica, or any number of web fonts. For our example, we will be using the Montserrat font, which is the same font we use for our demo reports.

In any case, ensure you have all font face files for all font families you plan on using. ActiveReportsJS supports the following font formats:

Configuring the Standalone Report Designer

To add a font family to the standalone designer, you’ll first need to navigate to the folder that holds the ActiveReportsJS font config file. These are at the following locations, based on your operating system:

• Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json
• macOS: ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json
• Linux: ~/.config/ActivereportsJS Designer/fontsConfig.json

At this location, create a folder named Fonts and copy all of the files for the font faces that you plan on using into it.

Then, open the fontsConfig.json file in your text editor of choice. This file contains descriptors for font races that a report author will use for textual content. In the path property, specify the absolute path to the parent folder of the Fonts directory. Replace the default items of the descriptors array with the descriptors of the desired font faces. Each descriptor includes the following properties:

For example, to allow the Regular, Italic, and Bold faces of the Montserrat font, you would use the following descriptors:

{
    "name": "Montserrat",
    "weight": "400",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Regular.ttf"
},
{
    "name": "Montserrat",
    "weight": "400",
    "style": "italic",
    "source": "Fonts/Montserrat/Montserrat-Italic.ttf"
},
{
    "name": "Montserrat",
    "weight": "700",
    "style": "normal",
    "source": "Fonts/Montserrat/Montserrat-Bold.ttf"
}

Run the standalone designer application, add a TextBox in a report's body, and make sure that you can set its Font Family property to one of the fonts that you enumerated in the fontsConfig.json file and that all the font faces are correctly displayed.

Configuring ActiveReportsJS-based Applications

An application that displays reports in the JavaScript report viewer, exports reports to a PDF or hosts the reports designer component should use the same configuration you created for the standalone designer application. The easiest way to achieve that is to copy the Fonts folder and the fontsConfig.json file to your application’s static assets folder.

This folder varies for different front-end frameworks. A few examples are as follows:

• Angular: Uses assets configuration; if the Fonts folder and the fontsConfig.json file are copied to the assets folder, modify the source properties of the font descriptors in the fontsConfig.json file so that they will start with assets. For example:

{
    "name": "Montserrat",
    "weight": "900",
    "style": "italic",
    "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}

• React: Uses the public folder for applications created with create-react-app.
• Vue: Uses static assets handling.

Finally, the application should call the registerFonts method of the FontStore object with the URL of the fontsConfig file. This code should run before the application starts displaying or exporting reports. Note that the registerFonts method is asynchronous and returns a Promise object.

The code that calls this method can also wait until this returned Promise resolves before loading reports into the viewer component or exporting them.

For pure JavaScript applications, the code will look like this:

<script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script>
<script>
  GC.ActiveReports.Core.FontStore.registerFonts(
    "/resources/fontsConfig.json" // replace the URL with the actual one
  )
</script>

For Angular, React, and Vue applications:

import { Core } from "@grapecity/activereports";
Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

You can find examples of this code in our live demos.

Configuring the Report Designer Component

Finally, to ensure that the report designer component displays only the registered fonts, set the fontSet property of the designer instance to 'registered.'

In addition, if you want to ensure that the newly added report items have one of the registered fonts by default, you can use the Custom Init Template feature.

Conclusion

And with that, we’ve come to the end of the article. As we’ve discussed, fonts are a powerful way for developers to enhance aesthetics and readability. In this article, we’ve shown how easy it is to incorporate custom fonts into your reports via the ActiveReportsJS Report Designer and Viewer.

If you’d like to try out ActiveReportsJS, you can download your free trial here.

Happy Coding!