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 or view, or added to the system so it can be used in multiple places.

2. Adding fonts

If you are using a font provider such as Google Fonts, you can follow their instructions on how to embed the fonts on the page. Google Fonts also provides an API if you want to include optional effects along with the fonts.

Tip
Google Fonts are shown here as an example, but if you have your own font files that you want to host for your users to download, you can add them as static resources in the administration area and add CSS or HTML to refer to these instead.

For example, in Google Fonts, click Select this style next to each font and style you want to include, then go to the embedding section that appears on the right.

Copy the code they provide to the clipboard, for example the <link> element as shown below:

HTML code for embedding Google fonts
HTML code for embedding Google fonts

This code needs to be added to the page for you to use it. This can be done in different ways:

2.1. App styling

Administrators can add custom fonts to the entire system in the App Styling screen under Setup as described in the article on white labeling the application.

App Styling
App Styling

You can simply paste the code provided by your font provider into the relevant app styling section.

For example, double-click to edit the HTML resource, then paste the HTML provided by Google Fonts.

2.2. HTML label

Alternatively, if you want to add the font only to a particular dashboard or another view such as a report, an easy way to do this is to add an HTML Label, found under Components in the toolbar.

After adding the HTML label, click to edit the label text from the toolbar or double-click the label, then paste or enter the HTML for your fonts.

Tip
When using a dashboard template, you can add the font to the template to also add it to all dashboards using that template.

This HTML Label will be hard to find later if there is no visible content included in your HTML, but you can always find it listed in the Layers window.

2.3. Loading script

Another alternative option that adds the font only to a particular view is to use the Loading script actions, which run when the view is opened for viewing.

Important
Script actions only run when the dashboard or view is opened for viewing. When adding the font this way, the font will not be visible if you open the file in edit mode until you click Sandbox View in the toolbar or switch to View in a report, scorecard, or small multiple.

Edit the dashboard or other view, and open the Properties window with nothing selected. This will bring up the properties of the view.

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

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

Editing the loading script
Editing the loading script

The following script adds the same HTML to the page that was provided by Google Fonts, but using JavaScript:

// ***** Custom Fonts *****
var tag = document.createElement('link');
tag.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Russo+One&family=Tangerine:wght@400;700&;display=swap');
tag.setAttribute('rel', 'stylesheet');
tag.setAttribute('type', 'text/css');
document.head.appendChild(tag);

The following script adds HTML that also requests font effects along with the fonts according to Google's instructions:

// ***** Font Effects *****
var tag = document.createElement('link');
tag.setAttribute('href', 'https://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);

You can reuse one of the blocks of script above if you change the href value that begins with https:// with the https address provided for your fonts/effects.

3. Using the fonts

Once the font's HTML or CSS has been added to the page using whichever method you prefer, you can now set the Font Family property of the dashboard, or any component or visualization.

The Font Family property can be set to any font family setting supported on the page by typing it in (you do not need to choose one of the suggestions from the popup).

Setting Font Family
Setting Font Family

Font providers such as Google provide tips for how best to specify the font family along with their embedding code, for example under CSS rules to specify families as shown in the screenshot above.

3.1. Font effects

Unlike using a font or font family as shown above, font effects require applying the effect's CSS class in script.

This script applies the fire animation effect to a label by assigning its CSS class:

// 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

3.2. Font suggestions

Although you can always type any value into the Font Family property that's compatible with font-family in CSS, including a custom font family you've added, you can also add custom font names to the list of suggestions that appears when users are setting this property in the UI. An administrator can use JavaScript like the following in the JavaScript resource in the App Styling page in Administration to call addFontFamilyOption after the page has loaded:

$(document).ready(function () {
  dundas.context.ready(function () {
    if (dundas.context.baseViewService) {
      dundas.context.baseViewService.addFontFamilyOption("Russo One");
    }
  });
});

4. See also

Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

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