Adding custom fonts and font effects

Contents[Hide]

1. Overview

This article shows how custom fonts and font effects can be added to your dashboard.

2. Add script to the ready actions

Open the properties window on the right with nothing selected. This will bring up the properties of the dashboard.

In the Main tab, scroll to the Actions category and expand the Ready actions.

Click the + button to add a script action, then click it to edit the script in the Script Editor.

Editing the script
Editing the script

The following script can be used:

// ***** Custom Fonts *****
// You can find fonts here : https://www.google.com/fonts#
// Don't forget to replace any spaces with a "+" sign in the URL
var fontNames = 'Tangerine|Poiret+One|Pacifico|Sigmar+One|ChunkFiveRegular';
var tag = document.createElement('link');
tag.setAttribute('href', 'http://fonts.googleapis.com/css?family=' + fontNames);
tag.setAttribute('rel', 'stylesheet');
tag.setAttribute('type', 'text/css');
document.head.appendChild(tag);

// ***** Font Effects *****
// (Effects may only be supported certain browsers)
// You can find font effects here: https://developers.google.com/fonts/docs/getting_started
var tag = document.createElement('link');
tag.setAttribute('href', 'http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|fire-animation|distressed-wood|3d');
tag.setAttribute('rel', 'stylesheet');
tag.setAttribute('type', 'text/css');
document.head.appendChild(tag);

Change the fontNames variable and the font effects URL to choose the fonts and effects to bring into your dashboard.

3. Using the fonts and effects

You can now use the font name in the Font Family property of the dashboard, or any component or visualization.

Setting Font Family
Setting Font Family

If you'd like to add an effect to a label, you will need to do this for each label in script.

This script applies the Tangerine effect to a label:

// Be sure to refer to the label by its Script Name, found in the Properties window:
$(label1.container).addClass("font-effect-fire-animation");

Font effect applied to a label
Font effect applied to a label

Font effect applied to a table
Font effect applied to a table

4. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri