Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like a charm.

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

https://i.stack.imgur.com/OcLbT.png

Everything was running smoothly on localhost, with the font loading correctly. However, upon deploying to the dev server, I encountered a warning in the 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

The font did download in the dev tools network tab, but the characters appeared differently from localhost, resembling a generic font instead. This issue undermined the main purpose of using the unique font.

https://i.stack.imgur.com/gfvSn.png

https://i.stack.imgur.com/mI3TF.png

I'm utilizing the personal edition of SAP Webide 1.53.9 64bit, with SAPUI5 version 1.71.13 if that information is relevant.

What could be causing this discrepancy? I've tested across various browsers without success.

Thank you!

csssapui5custom-font

Answer №1

The error likely stems from the UI5 uploader to ABAP mislabeling the woff2 file as something other than binary. To resolve this, you must inform the ABAP server by creating a .Ui5RepositoryBinaryFiles in the upload directory. This file, along with its counterpart .Ui5RepositoryTextFiles, specifies additional extensions that should be treated as either binary or text.

Each line within the .Ui5RepositoryBinaryFiles should follow the format ^.*\.woff2$ to indicate which extensions are considered binary.

For more detailed instructions, refer to the UI5 SDK documentation at

Keep in mind that support for woff2 is lacking on IE11. If compatibility with this browser is essential, it's recommended to define a sequence of supported fonts so the browser can choose the appropriate one. Learn more at https://caniuse.com/#feat=woff2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

Was the Gideon Sundback Google doodle created using JavaScript? I attempted to follow along in Firebug, but I couldn't quite grasp its implementation details. Any ideas on how it was possibly implemented? Any insights on the potential techniques use ...

javascriptcssgoogle-doodle

How to achieve a gradual border or box-shadow transition from thick to slim using CSS

Is there a way to achieve the design shown in the image below? I am looking for a thick top border that gradually becomes thinner as it reaches the sides and seamlessly merges into the black block. https://i.stack.imgur.com/gmjQh.png Here is my CSS code ...

css

Modify HTML text using conditional CSS without JavaScript

Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail. Here's my query: I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific B ...

javascriptcssreplaceonclick

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Struggle between Angular and fundamental CSS principles

Upon following the steps below, I aim to achieve my desired grids: How to set auto-margin boxes in flexible-width design using CSS? The solution provided is effective when implemented outside of Angular. However, when inserted inside an Angular component ...

cssangulartypescript

Issues arise when trying to implement Angular SCSS with ngx-datatable

I am encountering an issue with my SCSS. It seems that the CSS command from the SCSS file below is not being utilized. This particular SCSS file is generated with the component. Interestingly, when I place the code in the styles.scss file included in the ...

cssangularhtmlsassstylesheet

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

"Uncovering the ways iOS disrupts background-size functionality

I am currently working on creating several marked images that will adjust in size to fit the length of their content. This functionality works well on most browsers, except for those on iOS devices like iPhone and iPad. Take a look at the image-link below ...

htmlioscssiphoneipad

Managing the placement of the expanded autocomplete input in Material-UI

Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...

javascriptcssreactjsmaterial-ui

Customize Bootstrap 4 borders within a row

I am currently facing an issue with my code, where there is a border at the bottom of every row. Click here to view the code Unfortunately, I have noticed that the border at the bottom of each row does not extend across the full width. This occurs even wh ...

cssbuttonbootstrap-4rowoverflow

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

javascripthtmlcssscroll

Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...

htmlcssgoogle-chrome

Show using foreach, with a modification of the spacing between rows and columns

For my project, I need to display the same image 24 times with a 3x8 matrix on an A4 size page using a foreach method. The issue I'm encountering is that I have to manually add space between each row and column, but it cannot cause the page to break. ...

htmlcss

"Creating a custom navigation bar with full width and navigation corners on both left

I am struggling to make my website's navbar stretch to the edges of the container while maintaining full width. I have added left and right padding to each navigation item, but in smaller laptop resolutions, the items break onto a new line, which is n ...

htmlcssbootstrap-4

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

google-chromecssgoogle-chrome-extension

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

csssasswebpacksass-loadercss-loader

Adjust the height of an element using CSS based on the height of another

Is there a way to have two divs per row, where the second div always displays its full content and the height of the first div matches the height of the second div? If the content in the first div exceeds the height, it should be scrollable. I've atte ...

javascripthtmlcss

Unveiling the Solution: Deactivating CSS Style Hints in VS Code!

click here to view the image Can anyone guide me on how to turn off the style hint feature in VS Code while working with CSS? ...

htmlcssvisual-studio-code