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
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.
- Override or Replace font-bundle.css:
-
0
Yes i was checking this issue https://abp.io/support/questions/6503, but video which abp support provides is no longer available.
-
0
hi
You can replace the file in
Bundlesystem, and then replace the content ofstyle-initializer.jsto load font without Google.comCan you share your Blazor project structure?
Are you using the new
ABP Global Assetssystem?https://abp.io/community/posts/abp-global-assets-new-way-to-bundle-javascriptcss-files-in-blazor-webassembly-app-i0nu10rs
Thanks.
-
0
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
hi
You can replace the
style-initializer.jsfile. It will load thefont-bundle.css, which includesGoogle fonts.Thanks
-
0
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
hi
We will add an option to let Google fonts be replaceable in the next 5.0 version.
Thanks.
