During Personas projects, we should determine a set of font families that developers can use while creating their flavors, themes, and templates.
Configuring available fonts for Personas happens in the Administration application, by navigating to Corporate Branding → Fonts.
The list here will determine which fonts are available during object maintenance when formatting labels, buttons, text fields and other artifacts. Such fonts must be installed and accessible on the user’s workstation.
However, in certain scenarios we may want to use a font that is not accessible on the user’s device. Even if we add this font to the list of available ones in the Administration application, a fallback default font will be used instead when rendering the screen.
In these cases, there is a way to utilize such fonts by referencing their definition in an external font library. This is possible when the flavor is consumed via a browser session, but not in SAP GUI for Windows or Java.
Keep in mind that the below method uses DOM manipulation, which in general is not recommended and as such, not supported by SAP if something goes wrong. It also comes with certain risk, since if the referenced external font definition is compromised in any way, this will affect your flavors. Therefore, use it with caution and only reference fonts from trusted sources.
As an example, let’s see how to add the font called Yellowtail from the Adobe web font library.
- Add your new custom font entry in Personas Font Administration:
- On the Adobe font page, click on the </> symbol to add this font to your Web Project. This will give you a link like https://use.typekit.net/dyt4uby.css - open that to see the CSS definition.
- The part we care about is after @font-face:
- From here, extract the source information and add the following new script to your flavor. Ensure that the font definition matches exactly the one in the font library, by copy/pasting from the CSS. This could be a global script if you need this font in multiple flavors:
/* globals document */ var fontStyle = 'YellowtailFontStyle'; var oStyle; // Adding web fonts works in a web environment only, check for existence of document if (document) { // Check whether <style>-tag already exists oStyle = document.getElementById(fontStyle); if (!oStyle) { // Create a new HTML <style>-tag oStyle = document.createElement('style'); oStyle.setAttribute('id', fontStyle); // Add CSS @font-face declaration as text to the <style>-tag oStyle.appendChild(document.createTextNode( '@font-face {'+ 'font-family:"yellowtail";'+ 'src:url("https://use.typekit.net/af/c431ea/00000000000000007735a180/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/c431ea/00000000000000007735a180/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/c431ea/00000000000000007735a180/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;}' )); // Add the <style>-tag to the <head> of the HTML document document.head.appendChild(oStyle); } }
- Attach this script to the onLoad event of the screen.
- Reload your flavor (which will run the script), and now you can use the new font from the dropdown in the flavor editor:
- SAP Managed Tags:
