Access CSS style classes from a different application in webide

[Former Member]

Hi Experts,

I have a requirement to use a css Style Sheet in one of the SAPUI5 Applications in other UI5 Applications.

Scenario:

I need to use custom fonts in my applications, So I have created an empty SAPUI5 application and loaded the font files into that (Application is deployed to HANA Cloud platform). I have defined my font face in a css class in there and want to use those css fonts in all the applications on the same HCP. The structure of the application is as below:

Now I can access the fonts from any sapui5 application in my webide by defining the path to the font in css file:

@font-face{
font-family:proximaNovaSoftBold;
 src:url(/BRS_CRE_CustomFonts/ProximaNovaSoft/ProximaNovaSoft-Bold.otf) format("opentype");
}

and my font.css file looks as below:

@font-face{

font-family:proximaNovaSoft;
 src:url(/ProximaNovaSoft/ProximaNovaSoft-Regular.otf)format("opentype");

}
@font-face{

font-family:proximaNovaSoftSemiBold;
 src:url(/ProximaNovaSoft/ProximaNovaSoft-Semibold.otf)format("opentype");

}
@font-face{

font-family:proximaNovaSoftBold;
 src:url(/ProximaNovaSoft/ProximaNovaSoft-Bold.otf) format("opentype");

}
.proximaNovaClass {
    font-family:proximaNovaSoft;
}
.proximaNovaClassSemibold {
    font-family:proximaNovaSoftSemiBold;
}
.proximaNovaClassBold {
    font-family:proximaNovaSoftBold;
}

Ideally, I just change the path to the font folder in the BRS_CRE_CustomFonts application and use it in the application.

My question is to make it more generic than this. Instead of defining @font-face in every app, I want to import the CSS (@import or using the manifest.json file)from the BRS_CRE_CustomFonts applications and use the classes defined in there in my current SAPUI5 application.

I tried this approach but I get the below error when I try to use the class.

@import url("/BRS_CRE_CustomFonts/css/font.css");

I can't seem to load the css file (throws a 404 Error). Also tried it through the manifest file in sap.

Also, is  there a way to do this at the theme Level i.e using the UI Theme designer and applying the theme to all the applications.

I tried out the theme designer approach but couldn't find a parameter to change the font-family of the custom theme I am developing.

Thanks,

Deepak

[former_member227918 · Accepted solution]

Hi Deepak,

There is one more way to import css file in sapui5 app, you can add "includes" property in metadata block of component.js file, as below:

metadata: {

  "version": "1.0.0",

  "includes": ["css file path here"],

........

I am not sure your css file path of another application will work or not but yo can try once.

Regards,

Akhilesh

[Former Member · Accepted solution]

Thanks Abhishek,

My use case is to use the custom fonts for HCP Portal site, So I want to use these fonts for the Portal Headers and the SAPUI5 Applications deployed inside them as well.

Is there a way I can use this using UI Theme Designer or Any way I can add these font-face to library.css.

Please see this question for more details:

Any help is appreciated.

Best Regards,

Deepak

[former_member227918 · Accepted solution]

Hi Deepak,

Less.js may be the right hook ups to implement this,

please check below link may help,

css - Custom Font in SAPUI5 - override entire theme and its controls font with custom font - Stack O...

Getting started | Less.js

Regards,

Akhilesh

[Former Member · Accepted solution]

Thanks Akhilesh,

your reply is helpful. I went through the stack overflow post before. I have installed npm and less on my machine.

Let me explain the requirement a bit in detail:

We are developing a portal site on HCP. We have a corporate font which we need to use in our project. I have the font files with me, I need to upload them onto the server and use it in all the portal applications. So I developed a custom theme for the portal site and the same theme is applied on all the SAPUI5 applications being added to the portal site. The structure of my custom theme project is as below:

Now I am not sure how to proceed from here.

I have never used less before this and with theme project generated form the UI designer, I am all the more confused. I don't understand where to store my fonts on HCP and how to access them in the less file. There is also a library-prarameters.json file which I guess stores all the less variables with calculated values.

Basically,

-->We need to know where to store the font files (I have created a separate UI5 Application and deployed it on HCP which contains the Font Files - So I have an URL to access those files).

--> where Do we provide the source to those font files in the custom theme project.

i.e. @font-face{

     font-family: myCustomFont;

     src: url(/*path to hcp application containing the font files*/)

}

--> How Do we make the theme use my custom font-family for all the font based css.

Apologies for the big reply. we are stuck with this since long. It will be great if I can find some help.

Best Regards,

Deepak

[FabianBerr · Accepted solution]

Hi Deepak,

have you found a solution for your problem? We have the same requirement..

Best regards

Fabian