Category / Section
Customize Font Family in Bold BI Dashboards with Custom Theme Variables
Published:
When designing dashboards in Bold BI, you may want to customize the appearance to match your company’s branding or to improve readability. One way to achieve this is by applying a custom font family to your dashboards. Bold BI supports the customization of font families through the use of theme variables, allowing for a consistent look across all widgets within your dashboards. This article will guide you step by step on customizing the font family using theme variables.
Steps to Customize Font Family
Download the Theme Package
- At first, download the most recent release package for the custom theme and extract it. Inside the extracted files, you will discover distinct theme files for each widget, and dashboard element.
Modify Theme Variables
- Open the theme file you wish to customize.
- Locate the
--designer-font-familyand--designer-fontsrcvariables in the file boldbi.designer.definition.css.
Assign Font Family
- Set the
--designer-font-familyvariable to your desired font. For example:--designer-font-family: 'Poppins-Regular';
- Set the
Format Font Source
- Convert your font file to a base64 string using an online tool.
- Assign the base64 string to the
--designer-fontsrcvariable in the following format:--designer-fontsrc: url(data:font/truetype;charset=utf-8;base64,CONVERTED_BASE64_STRING) format('truetype'); - Ensure to replace
CONVERTED_BASE64_STRINGwith the actual base64 string of your font file.
Apply Changes
- Save the theme file with the updated variables.
- Follow the knowledge base articles to generate the custom dashboard theme minified file and upload it to the server.
- Additionally, we have included the CSS file for the Poppins regular font family for your reference to help you better understand.
--designer-fontsrc variable. For more information on how to apply the custom font family through settings, refer the help documentation.Additional References
PN
