How to Add a Custom Font in Bold Reports Report Viewer
Custom fonts can significantly enhance the visual appeal and branding of reports generated with Bold Reports. While Bold Reports offers a variety of standard fonts, you may have specific font requirements that aren’t covered by the default options. Here’s a step-by-step guide for adding custom fonts to the Report Viewer application in Bold Reports to achieve a unique and personalized look for your reports.
Store Custom Font Files
Begin by storing your custom font files (.ttf format) in a dedicated folder within your Report Viewer application. For example, create a folder named “fonts” and place your font files there.
Define Custom Fonts in CSS
In your application’s CSS file (typically named index.css), define the custom font using the @font-face rule. This rule associates a ‘font-family’ name with the font file. Define the ‘font-family’ name, ‘font-style’, ‘font-weight’ and ‘src’ with the relative path to your custom .ttf file, as shown in the example below:
@font-face {
font-family: 'Robotto';
src: url('FontsFolder/robotto.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Note: For additional fonts, create separate ‘@font-face’ rules for each font family following the same format as shown above.
Load the Custom Font in the Web API Controller
Next, load the font .ttf file in the Web API Controller. You can load the font .ttf file with different style and weight combinations as shown below. Refer to the documentation for adding streams for different font style and weight combinations.
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
reportOption.ReportModel.PDFOptions = new BoldReports.Writer.PDFOptions()
{
//Load custom font stream
Fonts = new Dictionary<string, system.io.stream="">
{
{ "Robotto", new FileStream(basePath + @"\\FontsFolder\\robotto.ttf", FileMode.Open, FileAccess.Read) }
}
};
}
Note: The “.ttf” files you are going to add inside the “fonts” folder must have the same name as the font you have used in your reports.
You can download the sample application from here.
