Adding Custom Fonts and Font Effects

This tutorial will showcase how easy it is to add custom fonts and font effects to your dashboard.
First you will need to add a script event to the Ready action of your dashboard.

  1. Open the properties panel on the right with nothing selected. This will bring up the properties of the dashboard.
  2. In the 'Main' section of the properties, scroll to the bottom and expand the 'Ready' action.
  3. Select the '+' button to add a script to the 'Ready' action
  4. With the script created, select it just below the '+' button. This will open the script editor.
  5. Now paste the following code into the script editor:
// ***** HOW TO ADD CUSTOM FONTS TO THE DASHBOARD *****
// 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);
// Once you've done this, type in the font name into to font-family property on the control for which you'd like it to be used.
// ***** THAT'S IT! *****

// ***** HOW TO ADD CUSTOM FONTS AND EFFECTS TO THE DASHBOARD *****
// (effects may only be supported by google chrome)
// 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);
  1. Change the fontNames variable and resource URL to choose the fonts you wish to bring into your dashboard.

  1. You can now use the font name in the font picker of any text property in adapters or controls.

If you'd like to add an effect to a label, you will need to add another line of script per label.

Here is the script required to apply the effect to the Tangerine label:

// Ensure the label script name matches that of your label…
$(labelScriptName.container).addClass("font-effect-fire-animation");

This will also work with other adapters, such as charts and tables.

 

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