How to Restrict Font Options in Bold Reports JavaScript Designer

Bold Reports allows developers to customize the font list in the Report Designer to enforce consistent font usage, ensuring brand alignment and design uniformity across reports. This guide provides step-by-step instructions to limit font options in your Bold Reports JavaScript application.

Prerequisites

To get started, either create a new JavaScript application using the Bold Reports User Guide or use an existing one.

Steps to Restrict Fonts

1. Configure the Code to Limit Fonts

   • In you HTML file, add the following code snippet.

    <div style="height: 750px; width: 100%; min-height: 750px;" id="container"></div>
    <script>
        $(document).ready(function () {
            $("#container").boldReportDesigner({
                serviceUrl: 'https://demos.boldreports.com/services/api/ReportingAPI',
            });
        });
   
        ej.ReportUtil.getFontNames = function (args) {
            let fontNames = [
                'Arial',
                'Times New Roman',
                'Roboto',
               
            ];
            if (args && args.length > 0) {
                let uniqueArray = ej.ReportUtil.getUniqueArray($.merge(args, fontNames));
                return uniqueArray.sort();
            }
            return fontNames.sort();
        }
    </script>
   

   Code Component	Description
   ej.ReportUtil.getFontNames	Function to retrieve and customize the list of font names.
   fontNames	Array containing the custom font names to be displayed.
   return fontNames.sort()	Sorts the final font list alphabetically.

2. Preview the Application

   • Run the application and verify that the font dropdown in the designer only displays the specified fonts: Arial, Times New Roman, and Roboto.
     
     

Conclusion

Restricting font options in Bold Reports helps maintain consistency, simplifies the design process, and supports brand standards across all reports.

See Also

• Adding Custom Fonts in Standalone Report Designer
• Adding Custom Fonts in the Bold Reports Enterprise server