How to Customize the Font Family in Bold BI Embedded Dashboards?

When embedding Bold BI dashboards into your application using JavaScript embedding, you may want to ensure that the dashboard’s font matches the style of your application. Bold BI supports the customization of font family in embedded dashboards, allowing for a seamless integration with your application’s design.

Uploading Custom Fonts to Bold BI

Before you can use a custom font in your embedded dashboard, you need to upload the font file to the Bold BI application. This ensures that the font is available for use within the Bold BI environment.

Applying Custom Fonts to Embedded Dashboards

After uploading your custom font to Bold BI, you can apply it to your embedded dashboards using the JavaScript API member.

Here’s how to set the font family for your embedded dashboard:

1. In your embedding application, locate the BoldBI.create() method.
2. Use the dashboardSettings.fontFamily JavaScript API member to set the custom font.
3. Provide the name of the uploaded font family as the value.

For example:

var dashboard = BoldBI.create({
     dashboardSettings: {
          fontFamily : "Patrick-hand" //You font family name
     }
});
dashboard.loadDashboard();

By setting the fontFamily property, you can customize the font of various Bold BI embedded modules, including the viewer, designer, data source, and pinboard embedding.

Additional References

For more information on embedding options and the JavaScript API reference, please visit the following resources:

• Embedding SDK - Embedding API Reference
• Look and Feel Settings - Font

By following these steps, you can ensure that your embedded Bold BI dashboards match the custom font family of your application, providing a consistent and professional user experience.