Skip to Content
avatar image
Former Member

Custom font in UI5 app with UI Theme Designer

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!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Sep 08, 2017 at 02:02 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 09, 2017 at 03:52 AM

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



    Add comment
    10|10000 characters needed characters exceeded

  • Jul 17, 2018 at 12:16 PM

    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;

    Add comment
    10|10000 characters needed characters exceeded