Theming - the story continues (Cloud Platform)

[nol_hendrikx]

Back in 2013 I wrote several blog posts for UI theming for SAP Enterprise Portal. Since 2015 I am developing SAPUI5 apps. These apps are often hosted in Fiori launchpad, where branding comes in place again.

 

With the UI Theme Designer you can manage a lot of properties. Over the years the UI Theme Designer team did a lot of nice improvements, like searching for css tags, selecting elements in the preview pane and so on.

Adding support for a custom font is in great demand. In Slack there is a OpenUI5 channel where people raise questions how to add a custom font to the launchpad (and apps).

I'd prefer to have a section in the UI Theme Designer where you can specify your custom font, like:

@font-face {

    font-family: my_custom_font;

    src: url(../fonts/my_custom_font.eot);

    src: url(../fonts/my_custom_font.eot?#iefix) format('embedded-opentype'), url('../fonts/my_custom_font.woff') format('woff'), url('../fonts/my_custom_font.ttf') format('truetype'), url('../fonts/my_custom_font.svg#my_custom_font') format('svg');

}

You can paste this code into the css part in the UI Theme Designer, but I noticed that is not a very stable solution.



 

For now, I managed to use a workaround. Keep in mind this is not the best solution, the custom fonts should be embedded / loaded in the main theme (there might be a small delay in loading your custom font).

 

The solution is to create a Fiori Shell plugin. 06df0af3e48c4c9fa24523ba8e809782 has written a nice blog how to create a shell plugin and register it into the launchpad.

 

In this plugin you can add a custom css file. Now in your project create a map css and add a file called 'style.css'.

In this file, paste in the font-face definition:

@font-face {

    font-family: my_custom_font;

    src: url(../fonts/my_custom_font.eot);

    src: url(../fonts/my_custom_font.eot?#iefix) format('embedded-opentype'), url('../fonts/my_custom_font.woff') format('woff'), url('../fonts/my_custom_font.ttf') format('truetype'), url('../fonts/my_custom_font.svg#my_custom_font') format('svg');

}

 

Also create a map called fonts and paste the custom font files in here. The filename should match the reference to the files above ofcourse.

 

To make sure the shell plugin loads the style.css, adjust the manifest file:

 

manifest.json

     "resources": {

            "css": [

                {

                    "uri": "css/style.css"

                }

            ]

        }

 

Now deploy your shell plugin. This should load the custom fonts, you can check it in the network trace (developer toolbar).

 

In the UI Theme Designer you can search for the fonts you need to adjust. In the Theme Designer you can use the @sapUiFontFamily less definition and set it to your custom font and a fallback font, like:

@sapUiFontFamily: 'my_custom_font', 'Verdana';

This can be done by unzipping the theme and changing the Base/baseLib/yourthemename/base.less file or changing it in the UI Theme Designer. The default value is @sapFontFamily, but you can replace it with your reference to the custom font:



Please note the warning, this is a protected parameter and not upgrade-safe!

If there is a better way of implementing a custom font, I'd love to hear it 🙂

 

Happy branding!

 

Noël