Closed

Lepton X theme font-bundle.css CDN issue #9975

tomas.kotrik@m2ms.sk created 22 days ago

Hello ABP Support Team,

We’re experiencing an issue with Lepton Theme X in one of our customer environments that has restricted network access. The environment has full internal connectivity but no access to the public internet (e.g., requests to google.com or other external CDNs are blocked).

When some pages are force-loaded, the browser tries to fetch fonts from external sources defined in font-bundle.css. Because those CDN requests cannot reach the outside network, the browser hangs while trying to load them and then fails after about 20 seconds, significantly delaying the page load and affecting the user experience.

This is content of font-bundle.css

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

Details:

Theme: Lepton Theme X
File: font-bundle.css

Issue:

External CDN font imports cause request timeouts in restricted networks

Behavior:

When pages are force-loaded, they take ~20 seconds before rendering
After the timeout, fonts fail to load and some UI elements may appear broken but we didn't find any changes yet.

Workaround: We’ve temporarily mitigated the problem by intercepting the CSS file request and returning an empty CSS response, like this:

app.Map("/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/font-bundle.css", b =>
{
    b.Run(async ctx =>
    {
        ctx.Response.ContentType = "text/css; charset=utf-8";
        await ctx.Response.WriteAsync("/* CLEARED font-bundle.css (no remote fonts) */");
    });
});

Request:

Could you please advise on the recommended way to handle this scenario?
Is there a built-in or planned configuration in Lepton Theme X to disable or replace remote font imports in font-bundle.css?

7 Answer(s)

0
AI-Bot created 22 days ago
Support Team ABP Agent
To address the issue of external font imports in LeptonX's font-bundle.css causing timeouts in restricted environments, you have a few options:

Override or Replace font-bundle.css:

You can override the default font-bundle.css by providing your own version in your project. Place a custom font-bundle.css in your wwwroot or static assets and ensure it is served instead of the default one. This file can be empty or contain only local font definitions.

Example (empty override):

/* font-bundle.css overridden to remove external font imports */

You can use the same middleware approach you described, or configure static file serving to prioritize your custom file.

Remove or Replace the @import in the Build Pipeline:

If you control the build process, you can remove or comment out the @import line in font-bundle.css before deployment, or replace it with a local font-face definition.

Use Local Fonts:

Download the required font files (e.g., Inter) and serve them from your own server. Update font-bundle.css to use local @font-face rules pointing to your internal URLs.

No Built-in Configuration (as of v9.2.3):

There is currently no built-in or documented configuration option in LeptonX to disable or redirect the remote font import in font-bundle.css. Overriding the file or intercepting the request, as you have done, is the recommended approach for now.

This approach aligns with common ABP and LeptonX theme customization practices for restricted environments.

Sources:

https://docs.abp.io/en/commercial/latest/themes/lepton-x/blazor

https://abp.io/support/questions/6503

This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
0

tomas.kotrik@m2ms.sk created 22 days ago

Yes i was checking this issue https://abp.io/support/questions/6503, but video which abp support provides is no longer available.
0

maliming created 22 days ago
Support Team Fullstack Developer

hi

You can replace the file in Bundle system, and then replace the content of style-initializer.js to load font without Google.com

Can you share your Blazor project structure?

Are you using the new ABP Global Assets system?

https://abp.io/community/posts/abp-global-assets-new-way-to-bundle-javascriptcss-files-in-blazor-webassembly-app-i0nu10rs

Thanks.
0

tomas.kotrik@m2ms.sk created 22 days ago

Hello,

We are using Blazor Server with Tiered Architecture, and I've also tried to make a Contributor which replace file but unfortunatelly from .Files i didn't see any similar to font-bundle.css
0

maliming created 22 days ago
Support Team Fullstack Developer

hi

You can replace the style-initializer.js file. It will load the font-bundle.css, which includes Google fonts.

Thanks
0
tomas.kotrik@m2ms.sk created 22 days ago
Hello,

I’m on ABP 9.2.3 (Blazor Server) with LeptonX. I couldn’t find a style-initializer.js in this setup; instead the CSS (including font-bundle.css) appears to be managed by leptonx-blazor-compatibility.js.

To keep fonts fully local, I took the following approach:

Override the compatibility script just for the font bundle I copied the file into my project as leptonx-blazor-compatibility-override.js and changed the URL resolution only when the font bundle is requested:

// inside createStyleUrl(...)

if (theme === 'font-bundle') { return baseUrl + "styles/leptonx/font-bundle.css"; // local file }

Bundle contributor to prefer my override script

public override void ConfigureBundle(BundleConfigurationContext context) { context.Files.RemoveAll(x => x.FileName.EndsWith("leptonx-blazor-compatibility.js")); context.Files.AddIfNotContains("/scripts/leptonx-blazor-compatibility-override.js"); }

And in Configure<AbpBundlingOptions>:

options.ScriptBundles.ConfigureAll(o => { o.AddContributors(typeof(LeptonXThemeScriptOverrideContributor)); });

I replaced <leptonx-theme-appearance /> in _Host.cshtml with explicit links (side-menu) and included my local font bundle:

This works, but it feels like a lot of plumbing just to make the font sheet local-only.

Questions / suggestions:

Are there plans to let LeptonX load all fonts purely from local assets (no external providers/CDNs) out of the box?

Thanks in advance for any guidance or a roadmap note—happy to adjust to the recommended approach if there’s a cleaner, supported way.
0

maliming created 22 days ago
Support Team Fullstack Developer

hi

The new Blazor project will not use the _Host.cshtml file anymore.

If you are using App.razor in your project, you can remove the leptonx-blazor-compatibility.js from BundleContributor

The <leptonx-theme-appearance /> is not used in the latest project.

However, your current solution is suitable for your project.

Thanks.