Search code examples
csssapui5custom-font

Importing custom font to SAPUI5 application

I'm playing around an expense app for some look&feel, and would like to use a receipt-like font. So I found the FakeReceipt font, got my woff and woff2 files at the same directory with my style.css and voila! It works.

@font-face {
    font-family: 'FakeReceipt';
    src: url('FakeReceipt.woff') format('woff'),
    	url('FakeReceipt.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

enter image description here

Everything works fine on localhost, i am able to see the font loaded correctly, but when i deployed it to the dev server, it shows a warning at console:

  • Failed to decode downloaded font: https://*********/sap/bc/ui5_ui5/sap//~04E3CA24FE6465024E9A6D765A0A6010~5/css/FakeReceipt.woff /sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?saml2=disabled#ZExpense-create:1

  • OTS parsing error: Size of decompressed WOFF 2.0 font exceeds 30MB

  • OTS parsing error: incorrect file size in WOFF header

I can still see it downloads the font at dev tools network tab but but font characters are different from localhost, it is seen like a generic font, and that vaporized the main purpose.

enter image description here

enter image description here

I am using personal edition of SAP Webide 1.53.9 64bit, 1.71.13 sapui5 version if it is relevant.

What is causing this? I've tried every different browser i've heard of.

Thanks!

Solution

  • A woff2 file is a binary file and I believe the error is caused by the UI5 uploader to ABAP not correctly classifying the file.

    To tell the ABAP server that this is a binary file, you need to create a .Ui5RepositoryBinaryFiles in the directory you upload to ABAP. This file (along with a corresponding .Ui5RepositoryTextFiles file) creates a list of extra extensions that are interpreted as binary or text.

    Each line in the file is written like this ^.*\.woff2$ to denote the extensions to include.

    More information can be found on the UI5 SDK - https://ui5.sap.com/#/topic/a560bd6ed4654fd1b338df065d331872.html

    It's also important to note that woff2 isn't supported on IE11 (if you want to support that browser) - https://caniuse.com/#feat=woff2. Generally you need to define a chain of supported fonts and the browser stops on the one that it supports.