How to Add a Custom Font in Bold Reports Embedded Designer
Bold Reports allows you to add custom fonts to the Embedded Designer application. By adding custom fonts into the Embedded application, they become available in the Font Drop-Down menu, and the selected fonts will be applied to the Designer UI and Report Viewer.
Configure Font Names in Designer
To make custom fonts available within the Bold Reports Embedded Designer Font Drop-Down, you need to configure the list of font names. Specify the custom font names within the fontNames property of the Designer’s configuration.
<div id="container"></div>
<script>
$("#container").boldReportDesigner({
fontNames: ['Helvetica','Helvetica Bold']
});
</script>
For more information on configuring font names, please refer to this document on fontNames.
Store Custom Font Files
Place your custom TrueType Font (TTF) file in a dedicated folder within your Embedded Designer application. For example, you can create a fonts directory and store your font files there.
Define Font in CSS File
In your application’s CSS file (e.g., index.css), define the custom font using the @font-face rule. This rule associates a font-family name with the font file. Replace ‘font-family name’ with your desired font-family name and ‘font-path’ with the relative path to your custom TTF file. Each font family should have its own separate @font-face rule.
@font-face {
font-family: Helvetica;
src: url(./fonts/Helvetica.ttf);
}
@font-face {
font-family: Helvetica Bold;
src: url(./fonts/Helvetica-Bold.ttf);
}
Refer the CSS File
In your HTML file, include a reference to your CSS file. Add this line within the <head> section to ensure that the custom font styles are applied throughout your application.
<link href="~/css/index.css" rel="stylesheet" />
Please find the Embedded JavaScript Designer with the above changes here.
See Also
