Skip to Content

Change Custom Font Family using UI Theme Designer

We have a custom font family that we want to use across all our FIORI/SAPUI5 applications. I have read that it is possible to do this using UI Theme Designer but I couldn't find the correct theme parameter. Is it really possible to do this?

Maybe we could also look into change all the styles via CSS but since our font family is custom, do we need to upload this first to our system?

Thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Mar 24, 2017 at 06:03 AM

    Hi Melanie,

    You are correct, you can change the custom styles with your specific requirements on standard theme.

    To do this, first step is you need to identify standard theme with help of F12 while loading, mostly it would be "sap_bluecrystal".

    Also you can theme details in index.html of application.

    Edit that theme specific to your requirements and save with custom name exp : zXXXXX.

    In your application refer the custom which you created instead of standard.

    Hope this answer will be help.

    Thanks

    SS

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Sridhar,

      Yes I can create my own theme via UI Theme Designer but problem is that I cannot edit the font style (font-family) of the theme with our custom font. I was only able to change the font via adding custom CSS on the UI theme designer. But it can only accept fonts like Courier, Time New Roman and other standard fonts. We are using a company specific font and would like to us that in our applications.

      Thanks.

  • May 02, 2017 at 01:24 PM

    Hi Melanie,

    It is possible to export your theme and modify the less files to load your custom theme. But you may encounter a lot of issues that the UI Theme Designer will stop loading after 33%. I am not sure why, I managed to save it once.

    When you copy the sap_belize theme to your own custom theme, you can modify all kind of css / less properties. When you select the CSS tab in the UI Theme Designer, a custom less file is created in your project.

    I have added the following line into it:

    @import url(//fonts.googleapis.com/css?family=Open+Sans);

    Now for your fonts (@sapUrFontFamily) you can change it to "Open Sans" - as an example of course.

    Be aware this is not supported and let's hope the UI Theme Developers will implement a custom font selection, since I do see these questions a lot.

    This is one way of adding your custom font to the theme. The other one is completely different, but will work like a charm also. In Fiori you can create a shell plugin application, that will extend the Fiori launchpad. Here you can include a custom.css file that will load your custom fonts :)

    css:
    
    @font-face {
        font-family: open_sans; src: url(yourlinktoopensansfont.eot);
    }
    
    or 
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

    Since the theme is loaded first, you will see a small disruption in fonts (your custom font will be loaded a bit later) unfortunately.

    To be honest, I still did not find the proper way to include a custom font in fiori launchpad (abap and cloud).

    Hope this helps a bit :D

    Regards,

    Noël

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Noel,

      Thank you for this information. Question though, does the custom font need to be hosted or part of the Google Fonts? Since our font style is propriety, we need to host them somewhere not in Google. I'm think of uploading them to our sap system and referencing it from there. Do by any chance have experience on this?

      Thanks!