Use Custom Fonts in Reporting

• Mar 11, 2024
• 4 minutes to read

The DevExpress Reporting tools allow you to use custom fonts in your reports. The following font formats are available:

• TrueType fonts (.TTF)
• OpenType fonts that use TrueType or CFF (Compact Font Format) glyph outlines (.OTF)
• OpenType Font Collections (.TTC, .OTC) that contain multiple fonts in a single file

Variable fonts (VF)] are not supported.

Install a Font

You can install the required font on your machine or server to use it in a report and the End-User Report Designer. Depending on your operating system, follow the instructions below.

Windows

Download the font files. If the font files are zipped, right-click the .zip folder and then click Extract to unzip them. If you are prompted to allow the program to make changes to your computer, and if you trust the source of the font, click Yes. Re-login to complete the installation.

Note

The Windows Server OS installs fonts on a per-user basis. Make sure that the font is installed for all users or for a user in whose name the application is run.

Linux

Install the fontconfig library to manage fonts. Copy the font file in the fonts directory and then refresh the font cache. In the Linux docker file, you can use the usr/local/share/fonts/ directory, and the following commands:

COPY ["FontsFolderNameHere/MyFontFileName.ttf", "usr/local/share/fonts/"]
RUN apt-get -y install fontconfig
RUN fc-cache -vf

Different Linux distributions use slightly different commands:

Ubuntu

sudo apt-get -y install fontconfig
cp <font name> ~/.local/share/fonts
fc-cache -vfkq

Debian

apt-get -y install libfontconfig1
sudo cp <font name> /usr/local/share/fonts/example/
fc-cache -fv

Alpine

apk add fontconfig
cp <font name> /usr/share/fonts/
fc-cache -f

You can install the ttf-mscorefonts-installer package to add Microsoft TrueType core fonts (Arial, Times New Roman, Courier New, and so on) to your system. Run the following terminal command to install this package and accept the license agreement:

Ubuntu

sudo apt-get install ttf-mscorefonts-installer

Debian

sudo apt install ttf-mscorefonts-installer -y

Alpine

apk --no-cache add msttcorefonts-installer

You can also use the SkiaSharp library to use fonts without the fontconfig installation. Add the SkiaSharp.NativeAssets.Linux.NoDependencies package to your project. Copy font files to the /usr/share/fonts folder. The Skia library automatically uses fonts from this folder.

Use a Font Without Installation

You can use the DevExpress.Drawing.DXFontRepository class to register custom fonts without installation. This approach is available on Windows and Linux operating systems.

The code sample below shows how to register a font distributed with an application and use this font in a report style.

In this example, the customFontStyle is the report style created in the report and added to the StyleSheet collection. The style is applied to the XRLabel control in the report. Although you can use the XRControl.Font property to set the control’s font directly, applying styles is common practice. For more information on report styles, review the following help topic: Report Visual Styles.

View Example: How to use a custom font distributed with the application

Global.asax.cs

using DevExpress.Drawing;
using System;

protected void Application_Start(object sender, EventArgs e) {
    DXFontRepository.Instance.AddFont(@"Fonts\MissFajardose-Regular.ttf");

    DevExpress.XtraReports.Web.ASPxWebDocumentViewer.StaticInitialize();
}

Global.asax.vb

Imports DevExpress.Drawing
Imports System

Protected Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
    DXFontRepository.Instance.AddFont("Fonts\MissFajardose-Regular.ttf")

    DevExpress.XtraReports.Web.ASPxWebDocumentViewer.StaticInitialize()
End Sub

C#

using DevExpress.Drawing;

public SampleReport()
{
    InitializeComponent();
    customFontStyle.Font = new DXFont("Miss Fajardose", 48F, DXFontStyle.Regular, DXGraphicsUnit.Point);
}

VB.NET

Imports DevExpress.Drawing

Public Sub New()
    InitializeComponent()
    customFontStyle.Font = New DXFont("Miss Fajardose", 48F, DXFontStyle.Regular, DXGraphicsUnit.Point)
End Sub

You can use custom fonts in End-User Report Designer for Web. Call the updateFont method with a specified key-value pair, where key is the font name and value is its display name.

The code sample below demonstrates how to register a custom font in the Web Report Designer’s client-side Init event.

ASPx

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">  
    <ClientSideEvents Init="function(s){ s.designerModel.updateFont({'Miss Fajardose': 'Miss Fajardose'}); delete DevExpress.JS.Widgets.availableFonts['Arial']; } " />  
</dx:ASPxReportDesigner>