Customize the Font Family Across Your Entire Dashboard Widget with Global Theme Variables for Widgets
When designing widget’s 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 entire widgets. 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 for All Widgets in Dashboard Using Widget Global Variables
1. Download the Theme Package
At first, download the most recent release packages for the custom theme and extract it. Inside the extracted files, you will discover distinct theme files for each widget, and dashboard element.
2. Modify Theme Variables
Open the theme file you wish to customize. Locate the --widget-fontfamily and --widget-fontsrc variables in the file boldbi.widgets.core.definition.css.
3. Assign Font Family and Font src
Set the --widget-fontfamily variable to your desired font. For example:
--widget-fontfamily: 'Poppins-Regular';
4. Format Font Source
Convert your font file to a base64 string using an online tool. Assign the base64 string to the --widget-fontsrc variable in the following format:
--widget-fontsrc: url(data:font/truetype;charset=utf-8;base64,CONVERTED_BASE64_STRING) format('truetype');
Ensure to replace CONVERTED_BASE64_STRING with the actual base64 string of your font file.
5. 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.
How to Personalize Your Font Family with Unique Variables for Every Widget
Changing the font family for individual widgets in Bold BI dashboards can enhance the readability and aesthetic appeal of your reports. Each widget in Bold BI has its own set of theme variables that allow you to customize its appearance, including the font family. To modify the font family for a specific widget, you can use the respective properties Font Family and Font Src variables to change the respective elements of the widget. To learn more information about theme variables for each widget, refer to the knowledge base articles.
- When utilizing the aforementioned global variable to update the font family in a custom theme, only the widgets within the dashboard will be impacted. The default font family will continue to be displayed in the dashboard banner, which showcases the title. For instructions on modifying the font family of the entire dashboard, refer to the knowledge base articles regarding global variables for the dashboard.
- Bold BI utilizes the
woff2format for font files in the User Management Server (UMS) page look and feel settings. If you are using the same format, ensure to convert the woff2 file into a base64 string before assigning it to the--widget-fontsrcvariable. For instructions on modifying the font family through settings, refer to the Font Settings help documentation.
Additional Reference
