Custom Font in SAPUI5 - override entire theme and its controls font with custom font

Question

Is there anyway we can override existing theme and its controls to a custom font?

Problem: I can able to override the global font with my custom font, but I can't override each and every controls font since all the controls have their own Font property assigned rather than inheriting from the global.

Any solution?

Answer 1

UI5 Theming and LESS

UI5 is using LESS internally to enable Theming in a comfortable way. LESS is a CSS Precompiler that extends CSS functionality. The implication and drawback is that the delivered UI5 Themes are precompiled already meaning your application is only using the generated, plain CSS.

UI5 Tooling for Themes

Unfortunately the real UI5 tooling behind it wasn't unveiled to us developers so far. The only tooling they provide is Theme Designer. There even is a on-demand version here. With Theme Designer you should be able to achieve easy styling changes as you are looking for.

Hacking UI5 Themes

But still all the ControlName.css files contained in the Themes ARE the uncompiled less files and you can find all the LESS variables UI5 is using in the library.less file. So with a little bit of hacking you should be able to recompile those LESS files into a new library.css file which is used at runtime. All css files of a library are combined and compiled with library.less into a single file - library.css

So if you want more details and understand what's going on behind the scenes check the library.less files e.g. http://[host][:port]/[path_to_my_application]/resources/sap/m/themes/sap_bluecrystal/library.less

You will find all the UI5 LESS variables in there. Probably most interesting for you is @sapUiFontFamily.

Anyways I would not recommend to change a lot in here since your styling can break very easily with new UI5 versions!