Adding Custom Fonts to BloX Widgets

[GuyLevin]

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

1. Extract the attached Zip file.
2. 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.
3. 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.