Google fonts #10540

9 Answer(s)

• 

  0

  AI-Bot created 6 days ago

  Support Team ABP Agent

  • Don’t edit _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/.../font-bundle.css (it comes from the NuGet package and will be regenerated/overwritten).
  • Instead, override the theme’s font-bundle.css with your own file (same virtual path) so the @import url("https://fonts.googleapis.com/...") line is never shipped to the browser.

  Step-by-step

  1. Create a local replacement file in your Blazor WASM client project:

  MyProjectBlazorClient/wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/font-bundle.css

  Put your local @font-face declarations there (pointing to your local .woff2/.woff files under wwwroot/fonts/inter/...) and do not include any @import to Google Fonts.

  Example skeleton (adjust paths to your real files):

  /* MyProjectBlazorClient/wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/font-bundle.css */
  
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter/Inter-VariableFont.woff2") format("woff2");
  }
  
  /* add italic, opsz variants as needed... */
  

  2. (Optional but recommended) Also override RTL if your app uses RTL:

  MyProjectBlazorClient/wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/font-bundle.rtl.css

  (Usually it can be identical to font-bundle.css.)

  3. Rebuild and redeploy. The browser will still request font-bundle.css, but it will now be served from your app and will not contain the Google Fonts import, so no request to fonts.googleapis.com will be triggered.

  This works because ABP serves static files from your app’s wwwroot, and a file placed under the exact same _content/{packageId}/... path effectively overrides the packaged static resource at runtime.

  ---

  Sources (verified)

  • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/bundling-minification#bundle-contributors
  • https://abp.io/docs/latest/release-info/migration-guides/abp-7-0

  ---

  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.

  Save Cancel
• 

  0

  DowletCsharp created 6 days ago

  Hi, we're using LeptonX, not LeptonX Lite. Is this solution also compatible with LeptonX?

  Save Cancel
• 

  0

  maliming created 6 days ago

  Support Team Fullstack Developer

  Hi,

  Can you share your project structure screenshot?

  You can try the steps below:

  Step 1: Download the Inter font files from https://github.com/rsms/inter/releases and place them in your project:

  wwwroot/fonts/InterVariable.woff2
  wwwroot/fonts/InterVariable-Italic.woff2
  

  Step 2: Create a local font CSS file at wwwroot/fonts/local-fonts.css in the Host/Server project:

  @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("/fonts/InterVariable.woff2") format("woff2");
  }
  
  @font-face {
      font-family: "Inter";
      font-style: italic;
      font-weight: 100 900;
      font-display: swap;
      src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  }
  

  Step 3: Add URL rewriting middleware in your Blazor module to redirect font-bundle.css requests to your local file. This must run before UseStaticFiles:

  public override void OnApplicationInitialization(ApplicationInitializationContext context)
  {
      var app = context.GetApplicationBuilder();
  
      app.Use(async (httpContext, next) =>
      {
          var path = httpContext.Request.Path.Value;
          if (path != null && path.EndsWith("/font-bundle.css", StringComparison.OrdinalIgnoreCase))
          {
              httpContext.Request.Path = "/fonts/local-fonts.css";
          }
          await next();
      });
  
      // ... rest of your middleware configuration
  }
  

  Thanks

  Save Cancel
• 

  0

  DowletCsharp created 5 days ago

  Here's our project structure:

  The wwwroot folder is located in BlazorClient:

  I used main.css and local fonts worked. Now I created my-fonts.css and use it for local fonts, but now they stopped working despite the fact that I added them in

  C#
  public class FederationStyleBundleContributor : BundleContributor
  {
      public override void ConfigureBundle(BundleConfigurationContext context)
      {
          context.Files.Add(new BundleFile("/fonts/my-fonts", true));
          context.Files.Add(new BundleFile("main.css", true));
      }
  }
  

  which is located in the Federation.Blazor.

  Save Cancel
• 

  0

  DowletCsharp created 5 days ago

  I intercepted the request as you showed

  app.Use(async (httpContext, next) =>
  {
      var path = httpContext.Request.Path.Value;
      if (path != null && path.EndsWith("/font-bundle.css", StringComparison.OrdinalIgnoreCase))
      {
          httpContext.Request.Path = "/fonts/my-fonts.css";
      }
      await next();
  });
  

  but judging by what I see in DevTools (if I'm not mistaken), the request is still going there.

  Save Cancel
• 

  0

  maliming created 5 days ago

  Support Team Fullstack Developer

  hi

  I will test it in a new Blazor WASM tiered project and share the code with you.

  Please wait a moment.

  Thanks.

  Save Cancel
• 

  0

  maliming created 5 days ago

  Support Team Fullstack Developer

  Hi,

  I created a test project using ABP Studio with the Blazor WebAssembly template and LeptonX theme to reproduce and verify the fix. The project structure is:

  • AbpSolution4.Blazor — Blazor Server Host project
  • AbpSolution4.Blazor.Client — Blazor WebAssembly Client project

  Step 1: Download the Inter font files from https://github.com/rsms/inter/releases and place InterVariable.woff2 and InterVariable-Italic.woff2 in the Blazor Server Host project's wwwroot/fonts/ directory (e.g. AbpSolution4.Blazor/wwwroot/fonts/).

  Step 2: In your Blazor module's OnApplicationInitialization, add the following middleware before MapAbpStaticAssets():

  // Intercept font-bundle.css requests and return local font definitions
  app.Use(async (httpContext, next) =>
  {
      if (httpContext.Request.Path.Value != null &&
          httpContext.Request.Path.Value.EndsWith("/font-bundle.css", StringComparison.OrdinalIgnoreCase))
      {
          httpContext.Response.ContentType = "text/css";
          await httpContext.Response.WriteAsync(
              """
              @font-face {
                  font-family: "Inter";
                  font-style: normal;
                  font-weight: 100 900;
                  font-display: swap;
                  src: url("/fonts/InterVariable.woff2") format("woff2");
              }
  
              @font-face {
                  font-family: "Inter";
                  font-style: italic;
                  font-weight: 100 900;
                  font-display: swap;
                  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
              }
              """
          );
          return;
      }
      await next();
  });
  
  app.MapAbpStaticAssets();
  

  I verified this on the test project — after the change, requesting https://localhost:44302/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/font-bundle.css returns the local font definitions with no Google Fonts reference.

  

  Thanks

  Save Cancel
• 

  0

  DowletCsharp created 5 days ago

  It worked, thanks!

  Save Cancel
• 

  0

  maliming created 5 days ago

  Support Team Fullstack Developer

  : )

  Save Cancel