How to Use Custom Fonts in JavaScript Reports
Tags: webdev, devops, javascript, tutorial
Published: 2023-07-26 14:29:48

---
canonical_url: https://developer.mescius.com/blogs/how-to-use-custom-fonts-in-javascript-reports
description: Learn how to use custom fonts in your JavaScript reporting application. See more from ActiveReportsJS today.
---
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 for developers to work with and customize fonts allows them 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 be focusing on how you can leverage the ActiveReportsJS Designer’s ability to customize fonts, covering the following topics:

*   [The Basics of Fonts](#basics)
*   [Configuring the Standalone Designer Application](#standalone)
*   [Configuring ActiveReportsJS-based Applications](#arjs)
*   [Configuring the Report Designer Component](#component)

## <a id="basics"></a>The Basics of Fonts

All ActiveReportsJS components operate within a web browser environment:

*   The [Standalone Report Designer](https://developer.mescius.com/activereportsjs/docs/v4.0/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App) is built with [Electron](https://www.electronjs.org/), which uses Chromium to display the user interface.
*   The [JavaScript Report Viewer](https://developer.mescius.com/activereportsjs/docs/GettingStarted/QuickStart) and [Designer](https://developer.mescius.com/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component) components are parts of a web application that runs in the browser on a user’s machine.
*   PDF, Tabular Data, and HTML [Export Filters](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export#export-reports) 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:

*   **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, 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:

![Font Family Details](https://files.grapecity.com/gc-website-media/vjoaop1m/calibri_font_family.png?width=500&height=350.89820359281435)

When ActiveReportsJS renders a report, it translates these font properties to [font-family](https://www.w3.org/TR/css-fonts-3/#font-family-prop), [font-style](https://www.w3.org/TR/css-fonts-3/#font-style-prop), and [font-weight](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) 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](https://fonts.google.com/specimen/Montserrat) font; this is the same font we use for our [demo reports](https://developer.mescius.com/activereportsjs/demos/).

In any case, ensure you have all font face files for all font families you plan on using. ActiveReportsJS supports the following font formats:
<div class="pm-table-container with-shadow-observer" data-layout="default">

<div class="pm-table-wrapper">

<table border="0" data-number-column="false">

<tbody>

<tr>

<th class="ak-renderer-tableHeader-sortable-column__wrapper" colspan="1" rowspan="1" data-colwidth="122" aria-sort="none">

<div class="ak-renderer-tableHeader-sortable-column">

Font Format

</div>

</th>

<th class="ak-renderer-tableHeader-sortable-column__wrapper" colspan="1" rowspan="1" data-colwidth="168" aria-sort="none">

<div class="ak-renderer-tableHeader-sortable-column">

 File Extension

</div>

</th>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

[WOFF 1.0 (Web Open Font Format)](https://www.w3.org/TR/WOFF/)

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

.woff

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

[WOFF 2.0 (Web Open Font Format)](https://www.w3.org/TR/WOFF2/)

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

.woff2

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

[TrueType](https://docs.microsoft.com/en-us/typography/opentype/spec/)

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

.ttf

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

[OpenType](https://docs.microsoft.com/en-us/typography/opentype/spec/)

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

.ttf, *.otf

</td>

</tr>

</tbody>

</table>

</div>

</div>

## <a id="standalone"></a>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 all of the font faces that you plan on using into this folder.

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:

<div class="pm-table-container with-shadow-observer" data-layout="default">

<div class="pm-table-wrapper">

<table border="0" data-number-column="false">

<tbody>

<tr>

<th class="ak-renderer-tableHeader-sortable-column__wrapper" colspan="1" rowspan="1" data-colwidth="122" aria-sort="none">

<div class="ak-renderer-tableHeader-sortable-column">

Property Name

</div>

</th>

<th class="ak-renderer-tableHeader-sortable-column__wrapper" colspan="1" rowspan="1" data-colwidth="168" aria-sort="none">

<div class="ak-renderer-tableHeader-sortable-column">

 Description

</div>

</th>

<th class="ak-renderer-tableHeader-sortable-column__wrapper" colspan="1" rowspan="1" data-colwidth="122" aria-sort="none">

<div class="ak-renderer-tableHeader-sortable-column">

Notes

</div>

</th>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

name

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

the font family name

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

i.e. “Arial” or “Times New Roman”

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

style

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

the font face style

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

“normal” or “italic”

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

weight

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

the font face weight

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

It is recommended to use numeric values from 100 to 900\. Visit the [CSS specification](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) for details.

</td>

</tr>

<tr>

<td colspan="1" rowspan="1" data-colwidth="122">

source

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

the relative path to the font face file

</td>

<td colspan="1" rowspan="1" data-colwidth="168">

i.e. “Fonts/Calibri/calibri.tff”

</td>
</tr>

</tbody>

</table>

</div>

</div>

For example, to allow the Regular, Italic, and Bold faces of the [Montserrat](https://fonts.google.com/specimen/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](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox/index) 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.

## <a id="arjs"></a>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. Here are a few examples:

*   **Angular**: Uses [assets configuration](https://angular.io/guide/workspace-config#asset-config); 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](https://create-react-app.dev/docs/using-the-public-folder/) for applications created with [create-react-app](https://create-react-app.dev/)<u>.</u>
*   **Vue**: Uses [static assets handling](https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling).

Finally, the application should call the **registerFonts** method of the [FontStore](https://developer.mescius.com/activereportsjs/api/modules/Core#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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mescius.com/activereportsjs/demos/features/viewer-integration/purejs).

## <a id="component"></a>Configuring the Report Designer Component

Finally, to ensure that the report designer component displays the registered fonts only, 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](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/custom-init-templates) 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.

Happy Coding!