[{"id":"a20f26ac-cd31-4e4d-9454-1e035b0f1587","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3604b8ce-1da0-413f-8274-7df0f7173573","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7fce7040-1bb1-4a61-9fb7-2e19d569de50","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"0eb72dd3-8f8f-4039-93a8-500bbde2301e","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"ac046cee-82b9-4edf-a642-ae6d7cb21ebf","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"75b66fd4-b740-443d-bc6e-1782048b60a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"dde44832-bb5c-45f3-8ebf-3badbc613cd9","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"43de3664-261b-4cf9-9945-fb519251f4c7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2f064d57-b088-4bc5-a628-4e0d7e1a0c65","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f290406b-ced1-4c52-abad-979160a79f6b","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1864834b-08ce-43f1-891b-c3cca6e04e95","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f96cfec1-420c-4ca7-ab0a-cab482731073","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3f2ea860-c764-43d8-ae3f-6e3b0314ce67","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"81eb70e8-f770-4384-9167-bc7c755ad052","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d0dff477-9f56-483a-a9fc-cab648905b41","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"793a62d7-460d-4699-9304-edb2941268ac","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2d6ebfad-f7d1-4cc5-8ba1-fdace3472056","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c8c7b5d5-f5bd-4b68-a12f-3aae9804a844","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"577a09da-dea1-42db-812f-4eeaa9274ece","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8ddd80d5-886f-41b8-8e3f-f73aa8146c8d","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e0909540-8bde-4587-bb4d-02445746db2a","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"464b8e03-462d-4aed-8818-05d32ec3bf00","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f235557b-9781-471f-bf03-38bae6e3e953","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd5d021d-0210-4d74-ba42-1a39ef14a385","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"548568fe-dbd1-4da5-a489-d9b3edf75329","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a0c823ed-e22b-493b-aded-4d201c0fa480","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d19bc9cd-ff53-4b0d-ab7e-a68c1497c4c6","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"94759fce-692f-4779-b5f3-fce5c58f242c","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"27658163-a479-432f-a192-dbed286beb3e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]
All the ActiveReportsJS components operate in a web-browser environment.
The standalone report designer application is built with Electron that uses Chromium to display the user interface.
The report designer and report viewer components are parts of a web-application that runs in the browser on a user's machines.
PDF and HTML Export Filters use a web-browser environment to measure report content.
Usually, a report consists of textual content that the browser renders by using shapes called glyphs. Font resources contain information that maps character codes to glyphs that represent these characters. Browser, therefore, needs to have access to font resources to display the text as expected.
All textual items in ActiveReportsJS have several font properties, including
Font Family: the font ID, f.e. Arial, Calibri, or Times New Roman
Font Style: normal or italic
Font Weight: Thin, Extra Light, Light, Normal, Medium, SemiBold, Bold, Extra Bold, Heavy
A unique combination of these three properties called Font Face. A font family typically consists of several font faces, usually represented by separate files. For instance, here is the screenshot of Calibry
font family folder in Windows:
When ActiveReportsJS renders report, it translates these font properties to font-family, font-style, and font-weight CSS style properties and relies on a browser to resolve associated font resources and extract required glyphs. The browser has two ways to access font resources - they may be installed locally on the system on which a browser is running or downloadable.
Using downloadable font resources is easy to maintain; all the modern browsers support it, and it guarantees the consistent output of textual content across all the environments. Besides, ActiveReportsJS PDF Export requires downloadable fonts because it embeds their subsets in a PDF document.
Therefore, the best way to ensure the consistent report output across all the environments is to configure ActiveReportsJS components to access downloadable font resources. This page offers a step-by-step guideline to achieve that.
First off, decide which font families you are going to use in reports. It could be standard fonts, such as Arial, Times New Roman, or Helvetica. It could be one or more web fonts. We use Montserrat font for the reports on the demo-website. In any case, make sure that you have all the font face files for all the font families. ActiveReportsJS supports the following font formats:
Font Format | File Extension | Notes |
---|---|---|
*.woff | ||
*.woff2 | IE11 does not support it | |
*.ttf | ||
*.ttf, *.otf |
You can find the standalone report designer font configuration at the following locations.
Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json
MacOS: ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json
Linux: ~/.config/ActivereportsJS Designer/fontsConfig.json
Create a folder named Fonts
and copy to it all the files for all the fonts faces that you will be using for reports
Then, open the fontsConfig.json
file in your favorite JSON editor. This file contains descriptors for font faces 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:
Property Name | Description | Notes |
---|---|---|
name | the font family name | For instance, "Arial" or "Times New Roman" |
style | the font face style | "normal" or "italic" |
weight | the font face weight | it is recommended to use numeric values from 100 to 900. Visit the CSS specifiction for details. |
source | the relative path to the font face file | For instance, "Fonts/Calibri/calibri.ttf" |
For example, to allow Montserrat font, you can add the following descriptors
Example of the "descriptors" field value in fontsConfig.json
{
"name": "Montserrat",
"weight": "100",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-Thin.ttf"
},
{
"name": "Montserrat",
"weight": "100",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-ThinItalic.ttf"
},
{
"name": "Montserrat",
"weight": "200",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-ExtraLight.ttf"
},
{
"name": "Montserrat",
"weight": "200",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-ExtraLightItalic.ttf"
},
{
"name": "Montserrat",
"weight": "300",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-Light.ttf"
},
{
"name": "Montserrat",
"weight": "300",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-LightItalic.ttf"
},
{
"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": "500",
"source": "Fonts/Montserrat/Montserrat-Medium.ttf"
},
{
"name": "Montserrat",
"weight": "500",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-MediumItalic.ttf"
},
{
"name": "Montserrat",
"weight": "600",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-SemiBold.ttf"
},
{
"name": "Montserrat",
"weight": "600",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-SemiBoldItalic.ttf"
},
{
"name": "Montserrat",
"weight": "700",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-Bold.ttf"
},
{
"name": "Montserrat",
"weight": "700",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-BoldItalic.ttf"
},
{
"name": "Montserrat",
"weight": "800",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-ExtraBold.ttf"
},
{
"name": "Montserrat",
"weight": "800",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf"
},
{
"name": "Montserrat",
"weight": "900",
"style": "normal",
"source": "Fonts/Montserrat/Montserrat-Black.ttf"
},
{
"name": "Montserrat",
"weight": "900",
"style": "italic",
"source": "Fonts/Montserrat/Montserrat-BlackItalic.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 you enumerated in the fontsConfig.json
file and all the font faces are correctly displayed.
An application that displays reports in the report viewer, exports reports to PDF, or hosts the report designer component should use the same configuration you created for the standalone designer application. The easiest way to achieve that is to copy those above Fonts
folder and fontsConfig.json
file to an application's static assets folder. This folder varies for different front-end frameworks. Here are some examples:
Using the Public Folder for React applications created with create-react-app
Assets configuration for Angular applications. If the Fonts
folder and the fontsConfig.json
file are copied to the assets
folder, then modify the source
properties of font descriptors in the fontsConfig.json
file so that they would start with assets
, for example
{
"name": "Montserrat",
"weight": "900",
"style": "italic",
"source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}
Static Assets Handling for Vue applications
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 the Promise object. Optionally, the code that calls this method can wait until this returned Promise resolves before loading reports in the viewer component or exporting them.
Example for pure JavaScript applications:
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script>
GC.ActiveReports.Core.FontStore.registerFonts(
"/resources/fontsConfig.json" // replace the URL with the actual one
)
</script>
Example 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 could find examples of such a code in our live demos.
To ensure that the report designer component displays the registered fonts only, you can pass the DesignerConfig object that has the fontSet
property set to registered
. You can check the Customization page to learn more about the DesignerConfig
usage.