ui5/webcomponents-theming makes network call to cdn

[NandikaaSAP]

Dear colleague,

We are using "@ui5/webcomponents-theming": "2.14.0" in our project, and this makes network calls to https://cdn.jsdelivr.net/npm, which is a third party cdn and not whitelisted in our CSP, hence the calls are failing.
We would require it to not make the network calls, but instead pick it up from locally. We would request for a solution for this.

This is our repository link: https://github.tools.sap/AP-AC-Products-Services/Actions-WebComponents/

Please let us know if you would require any other additional information from our side.

Regards,
Nandikaa

[ilhan007]

Hi @NandikaaSAP you can disable the font loading and load it on your own via the defaultFontLoading config

<script data-ui5-config type="application/json">
{
	"defaultFontLoading": false
}
</script>

Is that what you are looking for?

[NandikaaSAP]

Hi @ilhan007 thanks for this.

But even after we disable it here, the network call is still going to the cdn. We are facing issues in making it pick up from locally. Currently, the network call is still going to https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.29.3/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2

Instead of this, it should pick up from the local node-modules @sap-theming.

Can you help us with this?

[ilhan007]

Hi @NandikaaSAP maybe you haven't set it properly. Once this config is set to false, we don't insert the font faces that include the URLs to the https://cdn.jsdelivr.net...

This is a setting that should be enabled on app/consuming side. Here In the video you can see the network requests when the config is set to true (requests to the cdn are there) and to false (no requests to the cdn)

Screen.Recording.2026-01-14.at.15.31.28.mov

Step by step solution

For your case and CSP restrictions, the solution is to (1) stop the default font loading as it makes calls the cdn.
This can be done entirely on the consumers side. This means the application/page, e.g the environment where the web component that you develop is used and (2) load the fonts by themselves.

• Find all fonts and copy them:
  "node_modules/@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/"

• Then, create the @font-face declarations.

  You can reference our ones (only the URL will point to the self-hosted path):

  • node_modules/@ui5/webcomponents-base/dist/generated/css/FontFace.css.js
  • node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css

• Include the font-face CSS into the app/page:

<style data-ui5-font-face>
/* font-face declarations go here */
</style>

Note: Using the <style data-ui5-font-face> will also stop the default font loading as this special style + data-ui5-font-face attribute combination is something the framework checks for and if exists, the default font loading is prevented.
Otherwise, if the font face declarations are not part of <style data-ui5-font-face>, one must set "defaultFontLoading" to false to prevent the default font loading (that makes the failing calls).

[github-actions]

This issue has been closed. To reopen, just leave a comment!

[ilhan007]

Hello @NandikaaSAP

meanwhile, we are working on more convenient solution to ship a css file that will contain everything,
and importing it on the consumption side will be the only thing you need to do, relying on the fact that every standard build tool have css pipeline and can process css files.

// app.css

/*  importing fonts */
import "@{namespace}/Font.css"

/*  other app styles */ 
.app {
...
}

I will let you know once we have it productively, there are discussions where the file should be provided from (@ui5/webcomponents or @sap-theming/theming-base-content directly, or etc.)