customize the url where to load font and localization json files

[BubbleLeaf]

Is your feature request related to a problem? Please describe. The CDN of SAP is good , but it`s unuseable in some scenarios . So I hope I can make decision where to load the resource .

[vladitasev]

Hi @BubbleLeaf We believe this makes sense and we'll work on an official solution.

In the meantime, you could try this workaround:

import { _registerMappingFunction } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";

_registerMappingFunction((locale) => {
    return `https://unpkg.com/@ui5/webcomponents-localization@0.19.0/dist/generated/assets/cldr/${locale}.json`
});

This lets you tell the framework where to look for CLDR files.

Please let me know if this worked out for you.

Regards, Vladi

[vladitasev]

Regarding fonts, no way to configure this is present yet. We'll allow for this too.

[codefactor]

@vladitasev , et al.,

SuccessFactors has a need for this enhancement - in short, we need UI5 Web Components to use the same path to the font files that UI5 will eventually use to avoid the Browser from downloading 2 different versions of the same font files.

Our page will start-up with no UI5 and at some random time UI5 will be added lazily only once something is loaded on the page that requires UI5 (such as a popup that the user activates from the header).

In addition - during our analysis using Chrome Lighthouse tool, there was a recommendation to adjust the font-face. The suggestion was to add the following modifier to the font-face rule:

@font-face {
  font-display: swap;
}

I don't know the full story behind this particular property, but you can research and if it makes sense maybe add this little thing as well.

[stoehr]

I don't know the full story behind this particular property, but you can research and if it makes sense maybe add this little thing as well.

See https://web.dev/font-display/ for details on why Lighthouse suggests specifying font-display: swap.

[BubbleLeaf]

Hi @BubbleLeaf We believe this makes sense and we'll work on an official solution.

In the meantime, you could try this workaround:

import { _registerMappingFunction } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";

_registerMappingFunction((locale) => {
    return `https://unpkg.com/@ui5/webcomponents-localization@0.19.0/dist/generated/assets/cldr/${locale}.json`
});

This lets you tell the framework where to look for CLDR files.

Please let me know if this worked out for you.

Regards, Vladi

I'm sorry to reply to your message so late. I just tried it works, thanks for your help. I'm looking forward to your next version。

[vladitasev]

I don't know the full story behind this particular property, but you can research and if it makes sense maybe add this little thing as well.

See https://web.dev/font-display/ for details on why Lighthouse suggests specifying font-display: swap.

@stoehr We tried swap but it produces a visible "jump", because with it the browser does not await for the font to be downloaded, but immediately renders with the default font, and a bit later applies the real font. Since we're currently working on having more flexibility with fonts, our question to you is: do you need to be able to specify font-display?

[vladitasev]

Part of the solution: https://github.com/SAP/ui5-webcomponents/pull/1650 https://github.com/SAP/ui5-webcomponents/blob/font-customization/docs/CustomFonts.md

[stoehr]

@stoehr We tried swap but it produces a visible "jump", because with it the browser does not await for the font to be downloaded, but immediately renders with the default font, and a bit later applies the real font. Since we're currently working on having more flexibility with fonts, our question to you is: do you need to be able to specify font-display?

SuccessFactors doesn’t need the core UI5 WC code to specify the font-display because we can do that using the new flexibility for specifying the fonts, so thanks for implementing that.

But I could imagine others wanting to have the option for having the core UI5 WC code specify font-display: swap when they have performance requirements to have their pages progressively load as fast as possible, such that they wouldn’t mind how the fonts initially would be a different font, until the SAP “72” font is downloaded. What we do is to have the default/initial font of the page be “sans-serif”, and then with the font-display: swap specified for the “72” font, the jump from “sans-serif” to “72” isn’t as noticeable (compared to when the initial font is “serif”, which appears to be the default font for a lot of browsers), and allows the page’s first paint to happen faster in the cold-cache page loading scenarios. (And because we employ progressive page loading techniques, users just see the minor font-jump as simply an expected part of the progressive loading.)

[vladitasev]

Solution to customizing font location: https://github.com/SAP/ui5-webcomponents/blob/master/docs/CustomFonts.md

Solution to customizing CLDR assets location: https://github.com/SAP/ui5-webcomponents/pull/1687