Use Custom Fonts in Reporting
- 6 minutes to read
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 in a report and the End-User Report Designer. Follow the instructions below for your operating system.
Windows
Download font files. If 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 the user who runs the application.
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:
sudo apt-get -y install fontconfig
cp <font name> ~/.local/share/fonts
fc-cache -vfkq
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:
You can also use the SkiaSharp library to use fonts without 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.
Add Fonts to the Repository Directly
The following code snippet registers a font distributed with an application and uses 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.
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();
}
using DevExpress.Drawing;
public SampleReport()
{
InitializeComponent();
customFontStyle.Font = new DXFont("Miss Fajardose", 48F, DXFontStyle.Regular, DXGraphicsUnit.Point);
}
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 following code snippet registers a custom font in the Web Report Designer’s client-side Init event.
<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>
Identify Missing Fonts and Add Them to the Repository
Your report design and layout may rely on a font type that is not available in the application’s hosting environment. As a result, the font cannot be installed on the client machine, in a Docker image, in Azure, or in another host/container. In such cases, your report replaces unavailable fonts with default fonts, which may alter the appearance of report pages from the original design.
The DevExpress Reporting suite helps you ensure that a report uses the correct fonts regardless of the hosting environment. A report will notify you about missing typefaces so that you can obtain the required font data. Once you obtain these fonts, add them to your report’s DXFontRepository, thus making them available to report controls.
The DXFontRepository.QueryNotFoundFont event fires for every unavailable font type. Handle this event to do the following:
- Identify the missing typeface and its suggested alternative (e.RequestedFont and e.ActualFont)
- Obtain the required font file from a font hosting service (such as Google Fonts)
- Prepare a byte array and pass it to e.FontFileData
This implementation ensures that DXFontRepository contains all required font types before document generation begins.
The following code sample contains simple code that registers the preloaded “Sankofa Display” font in case it is unavailable in the application environment:
private static void Report_QueryNotFoundFont(object sender, NotFoundFontEventArgs e) {
if (e.RequestedFont == "Sankofa Display") {
string font = Environment.CurrentDirectory + "\\Data\\SankofaDisplay-Regular.ttf";
e.FontFileData = File.ReadAllBytes(font);
}
}
Obtain Missing Fonts from a Font Hosting Service (Google Fonts)
You can use the DXFontRepository.QueryNotFoundFont event to identify missing fonts and download them from a hosting service. The following example implements a service that asynchronously downloads missing fonts from Google Fonts and adds them to DXFontRepository.
Use your personal Google API Key to run this example. For instructions on how to obtain your key, see Google Fonts Developer API.
Assign your API Key to the apiKey variable in the FontCollectorService.cs file before you launch the example.
Review license agreements associated with fonts that you use. Use and redistribution permissions may vary. The service used in this example (Google Fonts) hosts fonts that are open source and available at no cost. Review the following page for details: Google Fonts FAQ.
The report in this example contains a few fonts that may be missing in many hosting environments: Ga Maamli, Roboto, and Nerko One. The example obtains these fonts if missing and makes them available to report controls. When exported to PDF, the report uses the original fonts:
