Using custom fonts in controls

Contents[Hide]

1. Overview

This article shows you how to use custom fonts for displaying text in components and data visualizations.

2. Using the CSS import rule

The following example shows how to use the Google font Open Sans in Dundas BI controls.

First, go to the server where Dundas BI is installed and locate the style.override.css file in the BIWebsite\Content\Override folder. In a default installation, the full path of this folder is:

C:\Program Files\Dundas Data Visualization Inc\Dundas BI\Instances\Instance1\www\BIWebsite\Content\Override

Edit the style.override.css file in Notepad and check to make sure that you have write access.

Add the following import line which references the Google font and save your changes.

/* Add any CSS overrides in this document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Or, add the following import line if you want to use non-default font weights.

/* Add any CSS overrides in this document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

Returning to Dundas BI, select a data visualization on the dashboard canvas and go to its Properties window. Click Text and set the Font Family property to Open Sans by typing it in manually.

Set the Font Family property
Set the Font Family property

After your dashboard has been auto-saved, press CTRL+F5 once or twice (on Chrome) to refresh the browser (since it may have cached the CSS file). The data visualization should now be using the specified font.

2.1. Adding a font family

As an extra step, add the Google font to the list of available font families for all components and data visualizations in Dundas BI as follows.

First, go to the server where Dundas BI is installed and locate the javascript.override.css file in the BIWebsite\Scripts\Override folder. In a default installation, the full path of this folder is:

C:\Program Files\Dundas Data Visualization Inc\Dundas BI\Instances\Instance1\www\BIWebsite\Scripts\Override

Edit the javascript.override.css file in Notepad and check to make sure that you have write access.

Add the following line and save your changes.

dundas.controls.FontFamily.GOOGLE = "Open Sans";

Then restart the Dundas BI website/application pool.

You should now be able to access the Open Sans font via the Font Family property (dropdown list). You may need to press CTRL+F5 once or twice (on Chrome).

Open Sans option added to Font Family
Open Sans option added to Font Family

3. Using the CSS font face rule

For this example, you can download a Google font such as Electrolize and serve the font files from your IIS web server.

First, go to the server where Dundas BI is installed and locate the style.override.css file in the BIWebsite\Content\Override folder. In a default installation, the full path of this folder is:

C:\Program Files\Dundas Data Visualization Inc\Dundas BI\Instances\Instance1\www\BIWebsite\Content\Override

Edit the style.override.css file in Notepad and check to make sure that you have write access.

Add the following font face rule which references the font location/url and save your changes.

/* Add any CSS overrides in this document */
@font-face {
    font-family: "Electrolize";
    src: url(http://www.example.org/Electrolize-Regular.ttf) format('truetype');
}

Returning to Dundas BI, select a data visualization on the dashboard canvas and go to its Properties window. Click Text and set the Font Family property to Electrolize.

After your dashboard has been auto-saved, press CTRL+F5 in Internet Explorer to refresh the browser. The data visualization should now be using the specified font.

Note
If you find that the font isn't being used as expected, open Developer tools for example and check for CORS - Cross Origin Resource Sharing errors.

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