Operating system

Each operating system includes a basic set of fonts, which may vary depending on the OS version and updates. Additionally, users can manually install extra fonts or do so via third-party applications. All fonts are generally divided into two main categories: bitmap and vector (TrueType, OpenType, PostScript).

Since our products support various technologies, the way fonts are rendered can differ. The OS version plays a significant role. For example, Reports.NET and Reports.WPF, which run on the .NET Framework, support TrueType and OpenType fonts in Windows 8/10/11, while older Windows versions only support TrueType fonts. Therefore, the report designer only displays fonts that are installed on the system and supported by the product.

These principles apply to Reports.NET, Reports.WPF, and Dashboards.WIN. In the case of web-based products (client-server technologies), the list of fonts is determined by the operating system on the server side. However, if the project uses the JS reporting engine, the list of available fonts is defined by the developers.

In this article, we’ll look at examples of how to connect fonts for the JS report generator. It’s worth noting upfront that when exporting reports to PDF, we recommend using font embedding mode. By default, this mode is enabled, though it can be turned off to reduce the size of the output file. However, to ensure correct display of PDF files across different devices and operating systems, it is strongly recommended to embed the fonts.

Embedding a font into report resources

A very simple and reliable way to ensure font availability in a report across various operating systems like Windows and macOS is to embed the font directly into the report resources. When creating or editing a report, the font file is added to the report’s resources. After that, the font can be used in the report or dashboard. This is a dependable method, especially when a report needs to be opened on a different device or in another operating system.

The main drawback of this method is the increased file size of the report template. Since the font file is physically embedded into the report file, the size can grow significantly - particularly if multiple font files are added to the resources.

A video tutorial on how to add font files to the report resources using the designer can be found here.

All other methods involve adding fonts through project code. The main class for working with fonts is StiFontCollection, which contains various static methods.

Embedding font files into resources via code

During project development, font files can be embedded into the report resources via code. The disadvantages are the same as embedding from the designer - primarily the increase in report file size.

Example of embedding a font into report resources via code.

Adding a font file

A font file can be added using the addFontFile() method. The file path is a required argument, while all other parameters are optional. In addition to the file path, you can also specify the font name, its style, and the font loading parameter.

Drawback: This method is not very convenient if you need to add several font files, as it may lead to repeated lines of code.

You can find an example of adding a custom font in our sample repository.

Adding a fonts folder

If you need to load a collection of font files, you could use the addFontFile() method for each one. However, a more logical approach is to specify an entire folder of fonts. For this purpose, the StiFontCollection class provides a special method setFontsFolder(). This method takes only one argument – the path to the folder containing the font files.

Drawback: This method is only relevant for Node.js projects, as browsers are restricted from accessing the file system due to security policies.

Example of adding a fonts folder.

Adding a font configuration

As mentioned above, it is not possible to use the setFontsFolder() method in the Web report designer. However, font files can still be loaded into the report designer as server resources using the addFontFile() method. To avoid duplicating code lines when loading multiple fonts, you can create a font configuration and pass it to the registerFontConfig() method.

The configuration should be an array of objects, where each object defines font attributes such as the file path (required), font name, and font style (optional).

Essentially, the registerFontConfig() method uses addFontFile() under the hood, iterating over the provided array and loading all specified fonts.

Drawback: You must create a configuration object beforehand.

There is no one-size-fits-all solution, but there is a suitable method for every situation. When building reporting and data analytics systems, especially for different operating systems like Windows and macOS, handling fonts properly remains an important consideration. Choose the most appropriate font management method depending on the context: in some cases, embedding the font into report resources is sufficient; in others, using a configuration is more convenient. The final decision is yours.