(v24) Add Custom Fonts and Font Effects

Add Custom Fonts and Font Effects

This applies to: Managed Dashboards, Managed Reports

Add custom fonts and font effects to your dashboard or view, or added to the system to use in multiple places.

Add Fonts

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

Note: Google Fonts are included here as an example. If you have your own font files to host for your users to download, add them as static resources in the administration area and add CSS or HTML to refer to these instead.

When using Google Fonts, each font and style you want to include has an option to Select this style. Select that option, then copy the code provided in the Embed section, such as shown below for <link> for Selected families:

Add this code to the page to use it. You can do so in several ways:

App Styling

Add custom fonts as an Administrator in the App Styling screen. See Modifying Styles.

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 in the HTML provided by Google Fonts.

HTML Label

Alternatively, if you only want to add the font to a specific 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 you add the HTML label, click to edit the label text from the toolbar or double-click the label. Paste or enter the HTML for your fonts.

Note: When you are using a dashboard template, you can add the font to the template. All dashboards using that template will have the font available.

If there is no visible content included in your HTML, you can locate it using the Layers window.

Loading Script

Another alternative adds the font only to a specific view using Loading script actions. These actions are run when the view is opened for viewing.

Important: Script actions only run when the dashboard or view is opened for viewing. When you add a font this way, it is not visible if you open the file in edit mode until you select 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 brings up the properties of the view.

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

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

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', '<a href="https://fonts.googleapis.com/css2?family=Russo+One&family=Tangerine">https://fonts.googleapis.com/css2?family=Russo+One&family=Tangerine</a>:<a href="mailto:wght@400;700&">wght@400;700&</a>;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', '<a href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|fire-animation|distressed-wood|3d'">https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|fire-animation|distressed-wood|3d'</a>); 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.

Use the Fonts

After you add the font's HTML or CSS, set the Font Family property on the dashboard, or any component or visualization it can be applied to.

Set the Font Family property to any font family setting supported on the page by typing it in; you do not need to use one of the suggestions from the pop up.

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

Font Effects

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

This example 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 Suggestions

You can always type any value into the Font Family property that is 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 similar to the example below in JavaScript resource in the App Styling page to call addFontFamilyOption after the page loads:

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