Adding Custom Fonts to BloX Widgets
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:
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).
- 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.
Rafael Ferreira
·1 year agoThank you GuyLevin, I had another value there and realized they could be separated by the ; to add my values.
GuyLevin
OP1 year agoHi 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.
Rafael Ferreira
·1 year agoHi 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:
I also have the Lato_regular.ttf file along with several other Lato.ttf files. Now I am trying to understand this part:
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?