Skip to Content

Custom font in UI5 app with UI Theme Designer

Sep 08, 2017 at 12:33 PM


avatar image
Former Member

Hi there,

I need to change the font-family for a UI5-Theme.

I try using the UI Theme Designer on SAP Cloud Platform for that and linked a project I'm developing on the SAP Web IDE. I ran into a few problems:

Set font-family with Theme Designer

I can't find any LESS variables including the phrase "font" in the Experts area.

Set font-family by CSS with .body selector

I just included a custom.css file within the project. I tried to change the font-family globally like that:

.sapUiBody {
   font-family: 'CustomFont', sans-serif;

The problem is that UI5s LESS creates font-family declarations on element level like you see on that example:

That means I'd need to go through all elements to change the font-family. This is not only very time-consuming than also error-prone! And it's strange, too btw...

Set font-family by CSS with * selector

That's not an option because it also affects icons. They won't be rendered fine because the icon font is replaced by the custom font.


The best option would be definitely to change the used font-family with the Theme Designer variables.

I found these two threads:

The SAP guy Guy weren't able to help and referred to the UI5-Forum. Fair enough! The TO then created another thread there:

User Former Member gave detailed information about his problem but did not get feedback in the end until the thread has been archived.

It would be great if anyone could help with that issue!

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Sharath M G Sep 08, 2017 at 02:02 PM

Use Icon fonts for icons and fonts to be used in fiori.

10 |10000 characters needed characters left characters exceeded
A K Sep 09, 2017 at 03:52 AM

Would be better to use Theme designer. Please find below link for your reference.



Show 1 Share
10 |10000 characters needed characters left characters exceeded

Icon fonts are the way to add custom fonts to your project. Theme designer is the tool which could be used writing your custom CSS code.

Stefan Siemes 3 days ago

I think SAP Theme Designer does not support changing the font right now (see the endless discussions on SCN ...)

We use the following workaround in our applications:

  1. Make a custom CSS in your project folder, e.g. css\style.css
  2. Include the CSS in your manifest.json

    "resources": {
        "css": [
            uri": "css/style.css"

  3. Set the font-family property in the CSS (in this case "Candara"), the selector excludes all SAP-Standard icons and their special fonts

    :not(.sapUiIcon) {
         font-family: Candara;

10 |10000 characters needed characters left characters exceeded