How to Upload and Apply Custom Fonts in Bold BI

Bold BI allows administrators and embedding developers to upload and apply custom font families across dashboards and the entire BI application. This feature ensures consistent branding, enhanced readability, and full design customization whether using on Cloud, On-Premises, or Embedded BI.

This article provides a step-by-step guide on uploading and applying custom fonts in Bold BI.

Steps to Upload Custom Fonts

Step 1: Access Look and Feel Settings

Log in to your Bold BI server as an administrator
Navigate to Settings → Look and Feel

Step 2: Add a New Font

Click the Add a New Font option to proceed.

Step 3: Upload Your Font File

Click Browse to open the file dialog
Select your font file (.ttf, .otf, or .woff format)
Click Upload

Step 4: Select and Save the Font

Locate the Font Style dropdown in the Look and Feel settings
Select your uploaded font from the dropdown list
Click Save

Step 5: Apply the Font Across Your Site

After saving, the custom font will be applied across all dashboards and the Bold BI application interface.

Using Custom Fonts in Embedded Dashboards

Prerequisite: The custom font must first be uploaded and saved in the Bold BI Look and Feel settings (Steps 1-5 above) before it can be referenced in your embedding application.

Applying the Font via SDK

Use the dashboardSettings.fontFamily property in the BoldBI.create() method to specify your custom font family:

var dashboard = BoldBI.create({
    serverUrl: "http://localhost:5000",
    dashboardSettings: {
        fontFamily: "Rouge_Script"
    }
});

dashboard.loadDashboard();

Replace Rouge_Script with the name of your custom font.