Using a custom font in MicroStrategy Library

You can use a custom font on documents or dashboards displayed in MicroStrategy Library. To accomplish this requires several steps.

First, you use the Web Customization Editor to create a plug-in that adds the custom font.
Next, you copy the plug-in to the plugins folder of the MicroStrategy products where you want to apply it to a document or dashboard—MicroStrategy Web, Desktop, or Workstation.
Finally, you copy the plug-in to the plugins folder of MicroStrategy Library so that it is available to a document or dashboard being displayed in Library.

In this example, you will add a font called Kaushan Script Regular. When you apply it to a visualization, it will look like this:

In this customization, you can either use a plug-in that has already been created for you, or you can create one yourself.

Using the plug-in provided for you:

This method lets you view the customization right away, without having to do anything except deploying the plug-in provided with the MicroStrategy Library SDK.
Creating the plug-in yourself using the Web Customization Editor:

This method gives you hands-on experience in performing this customization, as it steps you through the process of creating and deploying the plug-in.

Using the plug-in provided for you

The MicroStrategy Library SDK includes an out-of-the-box plug-in (ZIP file) that adds the custom font, Kaushan Regular Script. Follow the simple steps below to deploy the plug-in so that the custom font is available to documents or dashboards viewed in MicroStrategy Library.

Download the plug-in.
Extract the contents of the plug-in to the:
- plugins folder inside the MicroStrategy Library installation directory.
- plugins folder inside the installation directories of the MicroStrategy products where you want to apply the custom font to a dashboard or document—MicroStrategy Web, Desktop, or Workstation.
Restart your web server and Library server.

Creating the plug-in yourself using the Web Customization Editor

If you want to understand how to create a plug-in that adds a custom font and then deploy it to MicroStrategy products, follow the steps below. You create the plug-in in MicroStrategy Web, using the Web Customization Editor, and then copy the plug-in to any MicroStrategy installation where you want to use or view it.

Launch the Web Customization Editor in Eclipse.
Enable System Pickers, using the steps below.
1. From the Window menu, choose Preferences.
2. On the Preferences dialog, select MicroStrategy from the list on the left.
3. Under MicroStrategy Preferences in the pane on the right, select the Show Advanced Options checkbox to display all the options.
4. Select the System Pickers checkbox, click Apply, and click OK.
Create a new plug-in and give it a meaningful name.

On the Application Settings tab, click the Select Plug-in icon.
On the Select Plug-in dialog box, click New and enter a meaningful name for the plug-in. In this example, you name the plug-in CustomLibraryFont.
Click OK.

On the Application Settings tab, click on MicroStrategy Web Configuration to expand the hierarchical list of settings that can be modified to perform customizations.

Add the custom font to the font drop-down menu
1. Under MicroStrategy Web Configuration, expand Systems Pickers.
  
  If you don't see System Pickers, you have not enabled this option. Refer to the instructions in step 2 to make this option visible.
2. Right-click fontPicker and select New Shortcut.
3. The New Shortcut editor opens. Enter a name for the new shortcut to the custom font and click OK. In this example, enter pkrKaushan Script Regular.
  
  The name must have the prefix "pkr" followed by the actual name of the font (which is embedded in the font files).
4. The Shortcut Attributes page opens.
  1. On the Basic Properties tab, enter a meaningful descriptor for the font. This is what users will see in the font picker drop-down for a visualization in a dashboard. For this example, enter "kaushan_scriptregular" in the Descriptor textbox.
  2. Open the Advanced Properties tab and add the following name/value pairs under Attributes:
    Name Value
    style font-family: kaushan_scriptregular
    value kaushan_scriptregular
5. Save your changes.
Embed the custom font into the CSS
1. Open the CSS Settings tab and click on CSS to expand the hierarchical list of CSS files that can be modified to perform customizations.
2. Navigate to CSS -> MicroStrategy Web Styles -> style and expand mstr.
3. Right click on mstr.css and choose New Selector.
  1. Enter "@font-face" in the Selector textbox.
  2. Make sure the Apply to All Pages radio button is selected, and click OK.
4. Collapse MicroStrategy Web Styles, and you should see the following:
5. Navigate to CSS -> Customized Web Styles -> style -> global.css.
6. Right click on @font-face and choose New Property.
  1. Enter "font-family" in the Property textbox and type "kaushan_scriptregular" in the Value textbox.
  2. Make sure the Apply to All Pages radio button is selected, and click OK.
7. Right click on @font-face and choose New Property.
  1. Enter "src" in the Property textbox and type the following values in the Value textbox:
    
    url('./fonts/kaushanscript-regular-webfont.woff2') format('woff2'),url('./fonts/kaushanscript-regular-webfont.woff') format('woff')
  2. Make sure the Apply to All Pages radio button is selected, and click OK.
8. Right click on @font-face and choose New Property.
  1. Enter "font-style" in the Property textbox and type "normal" in the Value textbox.
  2. Make sure the Apply to All Pages radio button is selected, and click OK.
9. Right click on @font-face and choose New Property.
  1. Enter "font-weight" in the Property textbox and type "normal" in the Value textbox.
  2. Make sure the Apply to All Pages radio button is selected, and click OK.
After you finish customizing the CSS settings, the @font-face properties should look like this:

When you look in the plugins folder of your MicroStrategy Web installation directory, you will see a new plug-in folder called CustomLibraryFont.
Download the custom font folder that contains the font files used in this example, unzip the folder, and copy it to the style folder in your plug-in. In this example, the font files would be saved in ../MicroStrategy/plugins/CustomLibraryFont/style/fonts.
Restart your web server to apply the plug-in in MicroStrategy Web. The custom font can now be used in MicroStrategy Web.
If you want to apply or view the custom font in MicroStrategy Desktop or Workstation, copy the CustomLibraryFont plug-in from the plugins folder in your MicroStrategy Web installation directory to the plugins folder in your MicroStrategy Desktop or Workstation installation directory.
Finally, to make the custom font available to dashboards or documents viewed in MicroStrategy Library, copy the CustomLibraryFont plug-in from the plugins folder in your MicroStrategy Web installation directory to the plugins folder in your MicroStrategy Library installation directory, and restart the application server container in which MicroStrategy Library is deployed.

Name	Value
style	font-family: kaushan_scriptregular
value	kaushan_scriptregular

Now, if you open MicroStrategy Library and view a dashboard or document where the custom font has been applied, the custom font is visible. To confirm:

Open a dashboard in MicroStrategy Desktop, Workstation or Web.
Right-click on a part of a visualization (column header, metric, attribute, etc.) in the dashboard, choose Format, and expand the drop-down list of fonts. The kaushan_scriptregular font should appear at the bottom of the list.
Select kaushan_scriptregular, and the part of the visualization that you selected should now be displayed using the custom font. Save your changes.
Open the same dashboard in MicroStrategy Library, and you should see the custom fonts. In this example, the custom font has been applied to all parts of the visualization.