V1
V1

Fonts

In reports, we often use fonts (to format text) that are installed locally in our computers. The fonts that we are using may not be available in all the browsers for preview, print, or export.
In general, a browser loads font @font-face rule when it needs to render any text with specified font-family (and font-weight, font-style, unicode-range, etc.) The @font-face is not processed if the HTML element is not visible or no element on page uses this font.

In order to govern browsers' font resolving and loading mechanism with @font-face CSS rules, first prepare the font descriptors for the fonts you want to add, and then register the fonts. There can be two scenarios as described in the following sections, to register the fonts in viewer:

  1. Scenario-1: User loads and registers the fonts in the viewer, all through code.
  2. Scenario-2: User directly registers the fonts in viewer, that are already added in fonts configuration (fontsConfig.json) file while designing report.

Scenario-1

Prepare Font Descriptors

The interface of font descriptors consists of -

  • locals: Accepts font names of the installed copy of the font that are used by browsers to search in system directories ( C:\Windows\Fonts, /usr/share/fonts, etc.) It does not accept paths.
  • source: URL to download a copy of font, if the font is not found in the installed path. It accepts URLs - both absolute ("http://…") and relative ("/…"), but not local paths.
    const fonts: FontDescriptor[] = [
        {
            name: 'Noto Sans CJK JP', // font-family: "Noto Sans"
            locals: ['Noto Sans'], // try to find this font on local machine before load from remote
            source: 'fonts/NotoSansCJKjp-Regular.otf' // remote URL
        },
        {
            name: 'Noto Serif CJK JP', // font-family: "Noto Serif"
            locals: ['Noto Serif', 'Arial'], // try to find "Noto Serif" on local machine or use "Arial" instead before loading from remote
            source: 'fonts/NotoSerifCJKjp-Regular.otf' // remote URL
        }
    ];

Register Fonts

Pass the font descriptors to viewer (including export), using viewer.registerFont():

    const viewer = new ActiveReports.Viewer('#root');
    viewer.registerFont(...fonts)
    .then(() => viewer.open('/reports/InvoiceList.rdlx-json'));

or

to PageReport using GC.ActiveReports.Core.registerFont():

    const report = new GC.ActiveReports.Core.PageReport();
    GC.ActiveReports.Core.registerFont(...fonts)
        .then(() => report.load('/reports/InvoiceList.rdlx-json'))
        .then(() => report.run())
        .then(document => document.print());

The complete implementation to preload the registered fonts and render fonts in report's print preview is as shown.

    <head>
        <title>ActiveReportsJS Viewer</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/ar-js-viewer.css" />
        <script type="text/javascript" src="scripts/ie-polyfills.js"></script> <!--to run in IE-->
        <script type="text/javascript" src="scripts/ar-js-core.js"></script>      
        <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
    </head>
    <body onload="load()">

    <script>
            var Noto_Sans = {
                name: 'Noto Sans CJK JP', 
                locals: ['Noto Sans'],
                source: 'fonts/NotoSansCJKjp-Regular.otf'
            };
            var Noto_Serif = {
                name: 'Noto Serif CJK JP',
                locals: ['Noto Serif', 'Arial'],
                source: 'fonts/NotoSerifCJKjp-Regular.otf'
            };

            var fonts = [Noto_Sans, Noto_Serif];

            function load() {
                const report = new GC.ActiveReports.Core.PageReport();
                GC.ActiveReports.Core.registerFont(...fonts)
                .then(() => report.load('/reports/InvoiceList.rdlx-json'))
                .then(() => report.run())
                .then(document => document.print());
            }
    </script>
    </body>

To register .ttc font file in Viewer, user should add "postscriptName" property for fonts, as shown:

    viewer.registerFont({
     src: 'fonts/msgothic.ttc',
     name: 'MS Gothic',
     postscriptName: 'MS-Gothic'
    });

Scenario-2

Add Font Descriptors in JSON file

The fonts available for designing reports in ActiveReportsJS Designer are described in the fonts configuration (fontsConfig.json) file. See Fonts topic on adding fonts that you want to use while designing reports.

Register Fonts from JSON file

Once you have added the fonts in the designer, you can make the same fonts to work in ActiveReportsJS Viewer by simply registering the font configuration file, as shown.

<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
            function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.registerFont("/fonts/fontsConfig.json"); //add fontsConfig.json in 'fonts' folder
            viewer.open('/reports/InvoiceList-Fonts.rdlx-json');    
         }
    </script>
</body>

Note

  • The supported font file types are .ttf, .otf, and .woff (.woff2 is not supported by Internet Explorer 11).

  • Internet Explorer and Edge browsers do not support Document.fonts API. Some functionalities can be achieved with the polyfills.

  • Fonts are loaded in the registerFont() method, therefore, larger the number of fonts to load, longer is the waiting time for the report to completely render.

  • If font URL is not available, the font is not loaded. You should check the message in the browser console.

  • PDF export ignores locals property and loads font file only from source.

  • The generated @font-face CSS rule is injected into HTML Export result, too. However, relative URL in source property does not work in this case. User should register fonts with absolute URLs instead.

  • The @font-face CSS replaces fonts on full web-page, so Viewer UI fonts can be affected, too.

  • .tte font file is not supported.