Adding Custom Fonts to BloX Widgets

Introduction

BloX can import custom fonts to allow more design customization of the widget. A single or multiple custom fonts can be used in a widget.

This article explains the steps to add custom fonts to a BloX widget.
We will cover:

Example widget installation
Example widget setup explanation
Tip - How to find an extra font with Google Fonts

Example Widget Installation Instructions

Extract the attached Zip file.
Import dashboard – “BloX-Fontsexample.dash” to the Sisense environment.
Note: this example doesn’t require data, so can be connected to any available data layer.
Upload the CSS & font file (ttf) file to “/branding/BloX-stuff” on the environment. This path can be updated in the widget editor and CSS file.

The widget is available to use.

Example widget setup explanation

1. Font import

When using fonts with BloX, you can import them directly from the web using a URL, or copy the font files to the '/branding' folder of Sisense. Both methods can be used at the same time (as shown in the attached example).

Use font files stored within the Sisense branding folder (uploaded via file management UI).

Add a ‘@font-face’ rule to the CSS file.
Reference the font file to be used in the ‘src’ field.

Use fonts hosted on the web

Create ‘@import’ command (see ‘Using Google fonts for custom fonts’) for the hosted font and add it to the ‘style’ section.
for example:

"style": “@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap'); ",

2. CSS file configuration

Configure the CSS classes to be used in the BloX widget (create all the classes needed for the widget).
For each class define the font to be used, using the ‘font-family’ CSS rule.
See ‘Using Google fonts for custom fonts’ for specific ‘font-family’ rule definition.

3. BloX widget configuration

To set a font for all text within the BloX widget (default font) – add the imported font-family name to the 'fontFamily' parameter from the “Configuration” tab.
Add CSS file import to the main widget style section (make sure to keep any other ‘@import’ commands already in the section).
```
"style": "@import url('/branding/blox-stuff/SetFonts.css');",
```

To apply a specific custom font to a BloX element, add the CSS classes to the containers which will apply the fonts to that container.

Tip - How to find an extra font with Google Fonts

Google Fonts are free and open source - https://fonts.google.com/
The website shows previews of the different font families and their varieties.

Once a font is selected, the website provides the ‘@import’ command and the CSS rule to use the selected font family. It also allows the download of selected font files.

Get the ‘@import’ command and the CSS rule from the righthand toolbar under the ‘Use on the web section’. Make sure to change the embed option to ‘@import’.

Conclusion

Using the example and instructions in this article helps using custom fonts in BloX widgets in an easy and straightforward way.

Published 04-28-2023

BloxFontExample.zip58 KB

Blox

GuyLevin

Cloud Apps

Joined April 20, 2023

View Profile

3 Comments

Astroraf
Data Pipeline
02-19-2025
Hi GuyY DRay Liliia_DevX ,
I am trying to understand this documentation. On my size, I am trying to add 'Lato' font from Google . I have updated the .css file with:

/* font import examples /* /* importing local font files */ @font-face { font-family: 'Lato'; src: url('/branding/bpd/Lato/Lato-Regular.ttf'); font-weight:normal; font-style:normal; } .actions { /* defining the font used for container1 */ font-family: 'Lato Regular', monospace; }

I also have the Lato_regular.ttf file along with several other Lato.ttf files. Now I am trying to understand this part:
"style": "@import url('/branding/bpd/Lato/SetFonts.css');",
because I am just the JTD BloX action button, so do I add this style to the BloX configuration -> action -> style or is this the style at the top of the BloX?
GuyLevin
Cloud Apps
02-26-2025
Hi Astroraf

I reproduced your example as described above.
all you need to do is add the "@import url('/branding/bpd/Lato/SetFonts.css');" to the "style" prop at the top of the Blox code. see screenshot below.
i also removed the fontFamily prop from the configuration panel, see screenshot below, but this is not required.
hope this helps.
Astroraf
Data Pipeline
02-26-2025
Thank you GuyLevin, I had another value there and realized they could be separated by the ; to add my values.

Knowledge Base Article

Adding Custom Fonts to BloX Widgets