Custom Font Support For Vitaracharts in Microstrategy

Many companies use a custom font for branding, to exercise control and familiarity with their brand. To this end, Vitaracharts offers a seamless and centralized way to add new font styles to your visualizations. 

Vitara Charts can show text, like axes labels or data labels or tooltip, in the customer prescribed text font styles. Below are the steps to deploy custom fonts in Vitara charts.

Step 1:

Copy the font file into the following path:

\tomcat\webapps\MicroStrategy\plugins\VitaraCharts\style\v430559\font

Step 2:

Open customStyles.css file, which will be in the following path

plugins\VitaraCharts\custom

Step 3:

Uncomment the “@font-face” container by deleting the text /** (in first line) and the text **/ (in the line number seven)

Step 4:

Delete the entire text in the second line: “Uncomment to introduce new font-family and make it available”.

Step 5:

Replace the name of the font which you want to add in the line “font-family”. If your font name has spaces in it, then use quotation marks at the starting and end of the font name. Example, ““Frutiger 45 Light”.

Step 6:

In src:url line copy the path of the folder in which we copied the font file.

In the below example Hokjesgeest font is deployed.

@font-face {
            font-family: Hokjesgeest;
            src: url(../style/v430559/font/Hokjesgeest.ttf);
           }

Another example which has spaces in the font name:

@font-face {
            font-family: "Frutiger 45 Light";
            src: url("../style/v430559/font/Frutiger 45 Light.ttf");
           }

Step 7:

If you want to add multiple custom fonts, then define font family for each custom font.

@font-face {
            font-family: fontello;
            src: url(../style/v430559/font/fontello.ttf);
           }

Step 8:

List all the custom fonts names in the font vitara-chart-container.

.vitara .vitara-chart-container
{
	font-family:Hokjesgeest, fontello, "Frutiger 45 Light", Arial, Helvetica,
	Verdana, sans-serif !important;
}

Below is the screenshot of the updated “customStyle.css” file.

custom fonts

Steps to show the custom fonts in the font-family dropdowns in property editor and set a particular font as default font.

Step 1:

Open the file named global.txt in the following path,

Tomcat 8.0\webapps\MicroStrategy\plugins\VitaraCharts\custom

In this file, you can find fields named font.customFonts and font.defaultFont

Step 2:

Include all the custom fonts specified in the font.customFonts key, each one separated by a comma (,). For example,

font.customFonts=OpenSans, Hokjesgeest, "Frutiger 45 Light"

Step 3:

To set a font as default font for all charts, set the font.defaultFont key. For example,

font.defaultFont=Hokjesgeest

or

font.defaultFont="Frutiger 45 Light"

Refresh your web browser and open Vitara Charts. Below is the screenshot of the custom font in the Vitara chart.

custom fonts

custom fonts