[]
        
(Showing Draft Content)

Fonts registering

ActiveReportsJS runs, exports, and prints reports on a client-side and it means that the code is executed on different platforms, environments, and browsers. If a report is using a non-standard font for text formatting, for example one of google fonts, then there is a substantial chance that this font is not available on some environments where this report will be run, exported, or printed.

To mitigate this issue, ActiveReportsJS provides the API to register fonts for reports that will be used within the applications

The basic type for registering fonts is FontDescriptor. Here is the example of FontDescriptor instance that describes Roboto font

const robotoFont = {
  name: "Roboto",
  source:
    "https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2",
};

registerFont method of FontStore object accepts font descriptior object and registers the specified font, for example:

import { Core } from "@grapecity/activereports";

await Core.FontStore.registerFonts(robotoFont);

This code should be executed before a report that is using the custom font is previewed, exported, or printed.

Notes

  • 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.

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

  • 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. You 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.