Category / Section
Personalize Your Font Family with Individual Variables for Every Widget
Published:
When designing a user interface, customizing the font family for individual widgets can greatly enhance both the visual appeal and user interaction. Using separate variables for each widget allows you to maintain a consistent style throughout your application, while also providing flexibility and customization. Below are instructions on how to configure and use individual
font-family and font src variables for each element within every widget in Bold BI. These individual variables make it easy to adjust each property for each widget.To learn more information on how to personalize the font family using theme variables globally, refer to the knowledge base articles: Customize Font Family in Bold BI Dashboards with Custom Theme Variables.
Chart Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the chart widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --chart-widget-title-fontfamily --chart-widget-title-fontsrc | Widget Title |
| --chart-widget-subtitle-fontfamily --chart-widget-subtitle-fontsrc | Widget Subtitle |
| --chart-widget-axis-title-fontfamily --chart-widget-axis-title-fontsrc | Widget Axis Title |
| --chart-widget-axis-label-fontfamily --chart-widget-axis-label-fontsrc | Widget Axis label |
| --chart-widget-datalabel-fontfamily --chart-widget-datalabel-fontsrc | Widget Data Label |
| --chart-widget-legend-fontfamily --chart-widget-legend-fontsrc | Widget legend |
| --chart-widget-legendtitle-fontfamily | Widget legend Title |
Combo Chart Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the combination chart widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --combochart-widget-title-fontfamily --combochart-widget-title-fontsrc | Widget Title |
| --combochart-widget-subtitle-fontfamily --combochart-widget-subtitle-fontsrc | Widget Subtitle |
| --combochart-widget-axis-title-fontfamily --combochart-widget-axis-title-fontsrc | Widget Axis |
| --combochart-widget-axis-label-fontfamily --combochart-widget-axis-label-fontsrc | Widget Axis label |
| --combochart-widget-datalabel-fontfamily --combochart-widget-datalabel-fontsrc | Widget Data Label |
| --combochart-widget-legend-fontfamily --combochart-widget-legend-fontsrc | Widget Legend |
Scatter Chart Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the scatter chart widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --scatter-widget-title-fontfamily --scatter-widget-title-fontsrc | Widget Title |
| --scatter-widget-subtitle-fontfamily --scatter-widget-subtitle-fontsrc | Widget Subtitle |
| --scatter-widget-axis-title-fontfamily --scatter-widget-axis-title-fontsrc | Widget Axis Title |
| --scatter-widget-axis-label-fontfamily --scatter-widget-axis-label-fontsrc | Widget Axis Label |
| --scatter-widget-datalabel-fontfamily --scatter-widget-datalabel-fontsrc | Widget Data Label |
| --scatter-widget-legend-fontfamily --scatter-widget-legend-fontsrc | Widget Legend |
Radar Polar Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the radar polar widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --radarpolar-widget-title-fontfamily --radarpolar-widget-title-fontsrc | Widget Title |
| --radarpolar-widget-subtitle-fontfamily --radarpolar-widget-subtitle-fontsrc | Widget Subtitle |
| --radarpolar-widget-axis-label-fontfamily --radarpolar-widget-axis-label-fontsrc | Widget Axis Label |
| --radarpolar-widget-datalabel-fontfamily --radarpolar-widget-datalabel-fontsrc | Widget Data label |
| --radarpolar-widget-legend-fontfamily --radarpolar-widget-legend-fontsrc | Widget legend |
Circular Gauge
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the circular gauge widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --circulargauge-widget-header-title-fontfamily --circulargauge-widget-header-title-fontsrc | Widget Header Title |
| --circulargauge-widget-subtitle-fontfamily --circulargauge-widget-subtitle-fontsrc | Widget Subtitle |
| --circulargauge-widget-label-fontfamily --circulargauge-widget-label-fontsrc | Widget label |
| --circulargauge-widget-title-fontfamily --circulargauge-widget-title-fontsrc | Widget Title |
| --circulargauge-widget-value-fontfamily --circulargauge-widget-value-fontsrc | Widget value |
| --circulargauge-widget-differencevalue-fontfamily --circulargauge-widget-differencevalue-fontsrc | Widget difference value |
KPI card Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the KPI card widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --kpicard-widget-header-title-fontfamily --kpicard-widget-header-title-fontsrc | Widget Header Title |
| --kpicard-widget-subtitle-fontfamily --kpicard-widget-subtitle-fontsrc | Widget Subtitle |
| --kpicard-widget-leftlabel-fontfamily --kpicard-widget-leftlabel-fontsrc | Widget Left label |
| --kpicard-widget-leftvalue-fontfamily --kpicard-widget-leftvalue-fontsrc | Widget Left Value |
| --kpicard-widget-rightlabel-fontfamily --kpicard-widget-rightlabel-fontsrc | Widget right label |
| --kpicard-widget-rightvalue-fontfamily --kpicard-widget-rightvalue-fontsrc | Widget right Value |
| --kpicard-widget-kpivalue-fontfamily --kpicard-widget-kpivalue-fontsrc | Widget KPI value |
| --kpicard-widget-title-fontfamily --kpicard-widget-title-fontsrc | Widget Title |
Number Card Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the number card widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| –numbercard-widget-header-title-fontfamily --numbercard-widget-header-title-fontsrc | Widget Header Title |
| –numbercard-widget-subtitle-fontfamily --numbercard-widget-subtitle-fontsrc | Widget Subtitle |
| –numbercard-widget-rightvalue-fontfamily --numbercard-widget-rightvalue-fontsrc | Widget Right value |
| –numbercard-widget-title-fontfamily --numbercard-widget-title-fontsrc | Widget Title |
Map Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the Map widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --map-widget-title-fontfamily --map-widget-title-fontsrc | Widget Title |
| --map-widget-subtitle-fontfamily --map-widget-subtitle-fontsrc | Widget Subtitle |
| --map-widget-datalabel-fontfamily --map-widget-datalabel-fontsrc | Widget Data Label |
| --map-widget-legend-fontfamily --map-widget-legend-fontsrc | Widget Legend |
| --map-widget-legendtitle-fontfamily | Widget Legend Title |
Tree Map Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the tree map widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --treemap-widget-title-fontfamily --treemap-widget-title-fontsrc | Widget Title |
| --treemap-widget-subtitle-fontfamily --treemap-widget-subtitle-fontsrc | Widget Subtitle |
| --treemap-widget-datalabel-fontfamily --treemap-widget-datalabel-fontsrc | Widget Data label |
| --treemap-widget-legend-fontfamily --treemap-widget-legend-fontsrc | Widget Legend |
| --treemap-widget-legendtitle-fontfamily --treemap-widget-legendtitle-fontsrc | Widget Legend Title |
Heat Map Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the heat map widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --heatmap-widget-title-fontfamily --heatmap-widget-title-fontsrc | Widget Title |
| --heatmap-widget-subtitle-fontfamily --heatmap-widget-subtitle-fontsrc | Widget Subtitle |
| --heatmap-widget-axis-title-fontfamily --heatmap-widget-axis-title-fontsrc | Widget Axis title |
| --heatmap-widget-axis-label-fontfamily --heatmap-widget-axis-label-fontsrc | Widget Axis Label |
| --heatmap-widget-datalabel-fontfamily --heatmap-widget-datalabel-fontsrc | Widget Data label |
| --heatmap-widget-legend-fontfamily --heatmap-widget-legend-fontsrc | Widget Legend |
Grid Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the grid widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --grid-widget-title-fontfamily --grid-widget-title-fontsrc | Widget Title |
| --grid-widget-subtitle-fontfamily --grid-widget-subtitle-fontsrc | Widget Subtitle |
| --grid-widget-content-font-fontfamily --grid-widget-content-font-fontsrc | Widget Content |
| --grid-widget-content-hover-font-fontfamily --grid-widget-content-hover-font-fontsrc | Widget Content while hovering |
| --grid-widget-content-selection-font-fontfamily --grid-widget-content-selection-font-fontsrc | Widget Content while selection |
| --grid-widget-filterbar-font-fontfamily --grid-widget-filterbar-font-fontsrc | Widget Filterbar |
| --grid-widget-header-font-fontfamily --grid-widget-header-font-fontsrc | Widget header |
Pivot Grid
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the pivot grid widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --pivotgrid-widget-title-fontfamily --pivotgrid-widget-title-fontsrc | Widget Title |
| --pivotgrid-widget-subtitle-fontfamily --pivotgrid-widget-subtitle-fontsrc | Widget Subtitle |
| --pivotgrid-widget-content-font-fontfamily --pivotgrid-widget-content-font-fontsrc | Widget Content |
| --pivotgrid-widget-content-hover-font-fontfamily --pivotgrid-widget-content-hover-font-fontsrc | Widget content while hovering |
| --pivotgrid-widget-content-selection-font-fontfamily --pivotgrid-widget-content-selection-font-fontsrc | Widget content while selection |
| --pivotgrid-widget-header-fontfamily --pivotgrid-widget-header-fontsrc | Widget header |
| --pivotgrid-widget-groupingButton-fontfamily --pivotgrid-widget-groupingButton-fontsrc | Widget grouping button |
| --pivotgrid-widget-filterdialog-list-fontfamily --pivotgrid-widget-filterdialog-list-fontsrc | Widget filter dialog |
| --pivotgrid-widget-filterdialog-list-hover-fontfamily --pivotgrid-widget-filterdialog-list-hover-fontsrc | Widget filter dialog list while hovering |
| --pivotgrid-widget-filterdialog-list-selection-font-fontfamily --pivotgrid-widget-filterdialog-list-selection-font-fontsrc | Widget filger dialog list while selection |
| --pivotgrid-widget-cancelbutton-fontfamily --pivotgrid-widget-cancelbutton-fontsrc | Widget Cancel button |
| --pivotgrid-widget-cancelbutton-hover-fontfamily --pivotgrid-widget-cancelbutton-hover-fontsrc | Widget cancel btton while hovering |
| --pivotgrid-widget-okbutton-fontfamily --pivotgrid-widget-okbutton-fontsrc | Widget OK button |
| --pivotgrid-widget-okbutton-hover-fontfamily --pivotgrid-widget-okbutton-hover-fontsrc | Widget OK button while hovering |
| --pivotgrid-widget-filterdialog-header-fontfamily --pivotgrid-widget-filterdialog-header-fontsrc | Widget Filter dialog header |
Range Navigator Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the range navigator widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --rangenavigator-widget-title-fontfamily --rangenavigator-widget-title-fontsrc | Widget Title |
| --rangenavigator-widget-subtitle-fontfamily --rangenavigator-widget-subtitle-fontsrc | Widget Subtitle |
| --rangenavigator-widget-content-fontfamily --rangenavigator-widget-content-fontsrc | Widget Content |
Range Slider Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the range slider widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --rangeslider-widget-title-fontfamily --rangeslider-widget-title-fontsrc | Widget Title |
| --rangeslider-widget-subtitle-fontfamily --rangeslider-widget-subtitle-fontsrc | Widget Subtitle |
| --rangeslider-widget-label-fontfamily --rangeslider-widget-label-fontsrc | Widget Label |
Text (Rich Text Editor) Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the RTE widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --rte-widget-content-fontfamily --rte-widget-content-fontsrc | Widget Content |
List Box Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the list box widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --listbox-widget-title-fontfamily --listbox-widget-title-fontsrc | Widget Title |
| --listbox-widget-subtitle-fontfamily --listbox-widget-subtitle-fontsrc | Widget Subtitle |
| --listbox-widget-dropdownlist-fontfamily --listbox-widget-dropdownlist-fontsrc | Widget Dropdown list |
| --listbox-widget-dropdownlist-hover-fontfamily --listbox-widget-dropdownlist-hover-fontsrc | Widget Dropdown list while hovering |
| --listbox-widget-dropdownlist-selection-fontfamily --listbox-widget-dropdownlist-selection-fontsrc | Widget Dropdown list while selection |
Combo Box Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the combo box widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --combobox-widget-title-fontfamily --combobox-widget-title-fontsrc | Widget Title |
| --combobox-widget-subtitle-fontfamily --combobox-widget-subtitle-fontsrc | Widget Subtitle |
| --combobox-widget-dropdownlist-fontfamily --combobox-widget-dropdownlist-fontsrc | Widget Dropdown list |
| --combobox-widget-dropdownlist-hover-fontfamily --combobox-widget-dropdownlist-hover-fontsrc | Widget Dropdown list while hovering |
| --combobox-widget-dropdownlist-selection-fontfamily --combobox-widget-dropdownlist-selection-fontsrc | Widget Dropdown list while selection |
Text Filter Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the text filter widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --textfilter-widget-title-fontfamily --textfilter-widget-title-fontsrc | Widget Title |
| --textfilter-widget-subtitle-fontfamily --textfilter-widget-subtitle-fontsrc | Widget Subtitle |
| --textfilter-widget-fontfamily --textfilter-widget-fontsrc | Overall Widget Font |
Date Picker Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the date picker widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --datepicker-widget-title-fontfamily --datepicker-widget-title-fontsrc | Widget Title |
| --datepicker-widget-subtitle-fontfamily --datepicker-widget-subtitle-fontsrc | Widget Subtitle |
| --datepicker-widget-textbox-fontfamily --datepicker-widget-textbox-fontsrc | Widget Text Box |
| --datepicker-widget-weekheader-fontfamily --datepicker-widget-weekheader-fontsrc | Widget week header |
| --datepicker-widget-availabledates-fontfamily --datepicker-widget-availabledates-fontsrc | Widget Available dates |
| --datepicker-widget-availabledates-hover-fontfamily --datepicker-widget-availabledates-hover-fontsrc | Widget Available dates while hovering |
| --datepicker-widget-availabledates-selection-fontfamily --datepicker-widget-availabledates-selection-fontsrc | Widget Available dates while selection |
| --datepicker-widget-unavailabledays-fontfamily --datepicker-widget-unavailabledays-fontsrc | Widget Unavailable dates |
| --datepicker-widget-othermonthdays-fontfamily --datepicker-widget-othermonthdays-fontsrc | Widget other month days |
| --datepicker-widget-cancelbutton-fontfamily --datepicker-widget-cancelbutton-fontsrc | Widget Cancel button |
| --datepicker-widget-cancelbutton-hover-fontfamily --datepicker-widget-cancelbutton-hover-fontsrc | Widget Cancel button while hovering |
| --datepicker-widget-okbutton-fontfamily --datepicker-widget-okbutton-fontsrc | Widget OK button |
| --datepicker-widget-okbutton-hover-fontfamily --datepicker-widget-okbutton-hover-fontsrc | Widget OK button while hovering |
Period Over Period Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the Period Over Period widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --pop-widget-title-fontfamily --pop-widget-title-fontsrc | Widget Title |
| --pop-widget-subtitle-fontfamily --pop-widget-subtitle-fontsrc | Widget Subtitle |
| --pop-widgetcontainer-daterangelabel-fontfamily --pop-widgetcontainer-daterangelabel-fontsrc | Data range label |
| --pop-widgetcontainer-comparerangelabel-fontfamily --pop-widgetcontainer-comparerangelabel-fontsrc | Compare range label |
| --pop-widgetcontainer-vslabel-fontfamily --pop-widgetcontainer-vslabel-fontsrc | vs(Versus) label to compare two dates |
| --pop-widget-dialog-daterange-relativeheader-label-fontfamily --pop-widget-dialog-daterange-relativeheader-label-fontsrc | Date Range relative header |
| --pop-widget-dialog-daterange-relativelabel-fontfamily --pop-widget-dialog-daterange-relativelabel-fontsrc | Date Range relative label |
| --pop-widget-dialog-daterange-relativecombobox-textbox-fontfamily --pop-widget-dialog-daterange-relativecombobox-textbox-fontsrc | Date Range relative combo box's Text box |
| --pop-widget-dialog-daterange-relativecombobox-popup-fontfamily --pop-widget-dialog-daterange-relativecombobox-popup-fontsrc | Date Range relative combo box's popup |
| --pop-widget-daterange-calender-weekheader-fontfamily --pop-widget-daterange-calender-weekheader-fontsrc | Date Range calendar week header |
| --pop-widget-daterange-calender-content-datatext-fontfamily --pop-widget-daterange-calender-content-datatext-fontsrc | Date Range calendar content data text |
| --pop-widget-dialog-comparerange-relativeheader-label-fontfamily --pop-widget-dialog-comparerange-relativeheader-label-fontsrc | Compare range relative header label |
| --pop-widget-dialog-comparerange-relativelabel-fontfamily --pop-widget-dialog-comparerange-relativelabel-fontsrc | Compare range relative label |
| --pop-widget-dialog-comparerange-relativecombobox-textbox-fontfamily --pop-widget-dialog-comparerange-relativecombobox-textbox-fontsrc | Compare range relative combo box's Text box |
| --pop-widget-dialog-comparerange-relativecombobox-popup-fontfamily --pop-widget-dialog-comparerange-relativecombobox-popup-fontsrc | Compare range relative combo box's popup |
| --pop-widget-comparerange-calender-weekheader-fontfamily --pop-widget-comparerange-calender-weekheader-fontsrc | Compare range calendar week header |
| --pop-widget-comparerange-calender-content-datatext-fontfamily --pop-widget-comparerange-calender-content-datatext-fontsrc | Compare calendar content data text |
| --pop-widget-dialog-vslabel-fontfamily --pop-widget-dialog-vslabel-fontsrc | Dialog vs(Versus) label |
| --pop-widget-dialog-okbutton-fontfamily --pop-widget-dialog-okbutton-fontsrc | Dialog OK button |
| --pop-widget-dialog-cancelbutton-fontfamily --pop-widget-dialog-cancelbutton-fontsrc | Dialog Cancel button |
Tab Widget
Refer to the knowledge base articles to learn more information on how to personalize the color, font size, weight, and container styles for the tab widget. The following variables allow you to customize the font family for each element.
| Custom theme variables | Properties |
|---|---|
| --tab-widget-tab-header-fontfamily --tab-widget-tab-header-fontsrc | Widget Header Title |
TF
