2953986 - How to set up Custom Web Fonts on SAP Analytics Cloud

When you are working on SAP Analytics Cloud, you may have a requirement to use custom web fonts in order to maintain your company’s brand identity, provide better user experience to your end-users, and have more flexibility in formatting your data visualization, etc. Starting from release 2019.24, SAC has introduced the capability for administrators to bring in Custom Web Fonts to their tenant, and story designers can then use these fonts wherever configurable. To enable the Custom Web Font, the steps are documented on this SAC Help page. This note intends to provide an easy-to-follow instructions and to go through some of the tricky points you may encounter when configuring Custom Web Fonts.

SAP Analytics Cloud

N/A

N/A

Before you start

• If the font is already hosted online such as Google Fonts, you can simply get the URL and add it in the Story Fonts section (this is documented as an example on the SAC Help page)
• If you are using a proprietary font which is not available online, you will need to host it yourself. There are many different options to do this, in this blog post we will use Apache Web Server as an example.
• Please note: Custom Web Fonts are currently not supported for the Mobile App versions of SAP Analytics Cloud, and when exporting to PDF

Pre-requisites

• You have administrator access to your SAP Analytics Cloud tenant (you can access System Administration > Default Appearance > Story Fonts section)
• You have an Apache Web Server hosted online which can be accessed from the internet
• You need to enable SSL for Apache Web Server with a certificate issued by a certificate authority, there are many resources online on how to do this. Self-signed certificate would not be accepted by SAC. 
• You need to set the CORS “access-control-allow-origin” HTTP header for the font files and CSS stylesheet mentioned below, this can be done in the Apache configuration file with the mod_headers module installed, refer to this page for detail. The origin should be your SAC tenant URL, or "*" to allow any website. 

Step 1: Obtain the Font File

You need to obtain the physical font file which will be hosted on Apache Web Server. Typical formats are: truetype (ttf), woff, woff2, etc. Here we will use the “Tinos” font which can be downloaded here

Note:

• Some fonts offer different styles such as regular, italic, bold and bold italic, each style has its own font file, please make sure you download all the files if you want to use them in SAC.
• If you want to add multiple fonts to SAC, you need to create one CSS stylesheet per font, and host them separately on your web server so each font has its own URL to be added in SAC.

Step 2: Prepare the CSS stylesheet

As documented in the help page, for SAC to use the proprietary font from your own web server, we need to provide a URL which points to a font-face declaration. We can do this by creating a CSS file and upload it to your web server along with your font file.

First, we create a new text file, and put in the font-face declaration, when you are done, save the file in .css format. Here we provide an example of the CSS file using the Tinos font files, please replace the URL "your-web-server.com" with the actual domain name and path you are using.

/* Tinos Regular */
@font-face {
font-family: 'Tinos';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://your-web-server.com/fonts/tinos/Tinos-Regular.ttf) format('truetype');
}

/* Tinos Italic */
@font-face {
font-family: 'Tinos';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://your-web-server.com/fonts/tinos/Tinos-Italic.ttf) format('truetype');
}

/* Tinos Bold */
@font-face {
font-family: 'Tinos';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://your-web-server.com/fonts/tinos/Tinos-Bold.ttf) format('truetype');
}

/* Tinos Bold Italic */
@font-face {
font-family: 'Tinos';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://your-web-server.com/fonts/tinos/Tinos-BoldItalic.ttf) format('truetype');
}

Note: 

• In this example there are 4 font face declarations for regular, italic, bold and bold italic styles. If your font does not have all the styles, you will get a warning in SAC and the browser will substitute its own versions for the missing styles.
• The font name is specified in the font-family. You can have multiple font-face declaration for different styles, but they must have the same font-family. 
• The font-style should be either normal or italic
• The font-weight should be either 400 for regular or 700 for bold.
• The src url must be an absolute path, relative path would not work as SAC would see it relative to itself, not the actual web server where the font files are hosted.
• The valid formats are: truetype, woff and woff2.

Step 3: Upload CSS and font file to your web server

Upload the CSS and font files to your web server’s directory which hosts your website. When you are done, verify that you can access the CSS file and the font files using their HTTPS URLs in a web browser.

Note:

• When accessing the CSS file's URL, you can use the web browser's inspector console to check the HTTP reponse header, make sure the "Content-Type" is "text/css", and the “access-control-allow-origin” contains a valid value. 
• When accessing the font files' URL, check the HTTP response header and make sure the "Content-Type" is "font/ttf" or another format relative to the actual font format, and the “access-control-allow-origin” contains a valid value. 
  

Step 4: Add the CSS link in SAC

Go to SAC > System > Administration > Default Appearance > Story Fonts section, click the + sign, and paste the HTTPS URL to your CSS stylesheet. When you are done, click Save button to commit the changes.

Note: The web browser would not allow an HTTP URL to be added here, you will get an error “blocked:mixed-content” in the browser console when accessing the CSS file from SAC.

Step 5: Use the custom font in SAC story

In the SAC story, choose the text element you want to modify and click “Edit Styling”, and in the styling panel you will see the custom font listed in the Font dropdown.