KB235107: How to Embed a Custom Font Without Having to Install it on the Client Machines using MicroStrategy Web SDK

Following the KB37127, additional fonts can be added to the out of the box list of fonts provided in Strategy Web. The custom font added needs to be saved in the Fonts folder on the Client machine prior to the customization. If the custom font is not on the client machine, the custom font applied to a textbox on a document/dashboard may not be seen by users.
 
Sometimes it may not be feasible to have users install custom fonts on their client machines. In order to have the custom font applied to a textbox without installing the custom fonts on the client machines, developers can create a customization with CSS that will read the font installed on the Web Server.
 

1. Launch the Web Customization Editor .
2. Create a new plug-in and give it a meaningful name. (For step by step instructions on creating a new plug-in, please navigate to Home > Web SDK > Customizing Strategy Web > Web Customization Editor > Features and Customizable).
3. Minimize the Web Customization Editor.
4. Navigate to the style folder of the newly created plugin /plugins/customPlugin/style.
5. Create a new folder and name it fonts.
6. Copy your custom font file and place it in the newly created fonts folder inside your plugins (/plugins/customPlugin/style/fonts).
7. Click in Strategy Web Configuration inside the Application Settings view to expand the hierarchical tree. The expanded list comprises the different settings that can be modified to perform customizations.
8. Go to Global CSS > Customizations.
9. Right mouse click on global.css and select “New Selector”.

1. Create new selector “@font-face”.
2. Create new property “src” and add your value (location of your font). 
3. Create another property “font-family” and the respective value (defined by the font's designer, see the notes section). 
4. Save your changes.
5. Restart Web Server and clear browser caches.
6. Apply the custom font to the textbox on a dashboard.
7. The css file should look something like this:

@font-face {
 src: url('fonts/JenniferLynne.ttf');
 font-family: "Jennifer Lynne";
}

• Avoid having space in the file name of the font file. 
• Make sure that the font-family name of the custom font is correct. Such information is usually provided by the font's designer. The smallest mistake can prevent this from working.
• If the font-family contains any unusual characters or spaces, make sure to wrap it in quotes.
• There are 3rd party tools such as TTFEdit that can pull all of the fonts information.
• Make sure that the font-family defined in the CSS is defined in the custom picker created in KB37127.

For more information about using @font-face, refer to other online resources. For example:
https://css-tricks.com/snippets/css/using-font-face/
The example provided in this document is provided “as-is” and user has read the following customization warning:
ADDITIONAL INFORMATION:
The Strategy SDK allows you to customize several Strategy products and extend and integrate the Strategy business intelligence functionality into other applications. However, before changing the way Strategy products look or behave, it is helpful to understand how the application is built. For more information regarding the Strategy products or the process of customizing Strategy products, please refer to MicroStrategy Developer Hub.
To access the Strategy Developer Hub, you must have access to the Strategy Knowledge Base, you must have purchased the Strategy SDK, and you must be current on your Strategy maintenance agreement. If you are a US-based business and believe that you satisfy all three of these conditions but you do not have access to the Strategy Developer Hub, please contact Strategy Technical Support at support@microstrategy.com or at (703) 848-8700. If you are an international business, please contact Strategy Technical Support at the appropriate email address or phone number found at https://www.microstrategy.com/us/services/support/contact.
CUSTOMIZATION WARNING:
This customization is provided as a convenience to Strategy users and is only directly applicable to the version stated. While this code may apply to other releases directly, Strategy Technical Support makes no guarantees that the code provided will apply to any future or previous builds. In the event of a code change in future builds, Strategy Technical Support makes no guarantee that an updated version of this particular customization will be provided. In the event of a code change in future builds, Strategy may not be able to provide additional code on this matter even though this customization is provided at this time for this specific build. For enhancements to this customization or to incorporate similar functionality into other versions, contact your Account Executive to inquire about Strategy Consulting assistance.
KB235107