Fonts play a large part in the visual representation of 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 for developers to work with and customize fonts allows them to enhance both the aesthetic and readability of the information that they’re presenting. JavaScript To match JavaScript's flexibility, ActiveReportsJS allows users to heavily customize the text within reports. In this article, we’ll be focusing on how you can 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 The Basics of Fonts All ActiveReportsJS components operate within a web browser environment: The is built with , which uses Chromium to display the user interface. Standalone Report Designer Electron The and components are parts of a web application that runs in the browser on a user’s machine. JavaScript Report Viewer Designer 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 have several font properties, including: : The font ID, i.e., Arial, Calabri, or Times New Roman. Font Family : Normal or italic. Font Style : Thin, Extra Light, Normal, Medium, SemiBold, Bold, Extra Bold, Heavy. Font Weight A unique combination of these three properties is called a . A font family typically consists of several font faces, which are (normally) represented by several files. Font Face For instance, the font family has six different font faces: Calibri 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. It could be standard fonts like Arial, Times New Roman, or Helvetica. Or, it could be any number of web fonts. For our example, we will be using the Montserrat font; this 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: : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows : ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json macOS : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux At this location, create a folder named and copy all of the files for all of the font faces that you plan on using into this folder. Fonts Then, open the 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 property, specify the absolute path to the parent folder of the directory. Replace the default items of the descriptors array with the descriptors of the desired font faces. fontsConfig.json path Fonts Each descriptor includes the following properties: For example, to allow the Regular, Italic, and Bold faces of the font, you would use the following descriptors: Montserrat {
    "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 property to one of the fonts that you enumerated in the file and that all the font faces are correctly displayed. Font Family fontsConfig.json 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 folder and the file to your application’s static assets folder. Fonts fontsConfig.json This folder varies for different front-end frameworks. Here are a few examples: : Uses assets configuration; if the folder and the file are copied to the assets folder, modify the source properties of the font descriptors in the file so that they will start with assets. For example: Angular Fonts fontsConfig.json fontsConfig.json { "name": "Montserrat", "weight": "900", "style": "italic", "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" } : Uses the public folder for applications created with create-react-app. React : Uses static assets handling. Vue Finally, the application should call the method of the FontStore object with the URL of the file. This code should run before the application starts displaying or exporting reports. Note that the method is asynchronous and returns a object. registerFonts fontsConfig registerFonts Promise 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 , , and Vue applications: Angular React 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 the registered fonts only, set the property of the designer instance to registered. fontSet 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 feature. Custom Init Template 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. Happy Coding! Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Utilizing Custom Fonts in JavaScript Reports

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Top Blazor UI Components: Everything You Need to Know

Building Student Progress Reports in JavaScript

5 Insights on Font Psychology That'll Enhance Your UX Design

How Color and Fonts Influence a Company's Success and How to Use Them

How to Choose the Perfect Font for Your Website and Advertisements

The Top Blazor UI Components: Everything You Need to Know

Building Student Progress Reports in JavaScript

5 Insights on Font Psychology That'll Enhance Your UX Design

How Color and Fonts Influence a Company's Success and How to Use Them

How to Choose the Perfect Font for Your Website and Advertisements

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps