Google fonts #10540

2 Answer(s)

• 

  0

  AI-Bot created 13 hours 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

  maliming created 11 hours ago

  Support Team Fullstack Developer

  Hi,

  The font-bundle.css in LeptonX Lite theme contains an @import to Google Fonts, and there's no built-in option to disable it. You can customize the style bundle contributor to replace it with either local fonts or a different online font provider.

  Step 1: Create your font CSS file (e.g. wwwroot/fonts/my-fonts.css).

  For local fonts (recommended for offline environments):

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

  You can download the Inter font files from https://github.com/rsms/inter/releases and place them alongside this CSS file.

  Or if you want to use a different online font (e.g. Bunny Fonts, Adobe Fonts, etc.), you can simply use an @import pointing to that provider instead.

  Step 2: Create a custom style contributor to replace the font-bundle.css:

  using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
  
  public class MyBlazorStyleContributor : BundleContributor
  {
      public override void ConfigureBundle(BundleConfigurationContext context)
      {
          // Remove the Google Fonts import
          context.Files.RemoveAll(
              f => f.Contains("font-bundle")
          );
  
          // Add your font CSS instead
          context.Files.AddIfNotContains("/fonts/my-fonts.css");
      }
  }
  

  Step 3: Register the contributor in your module class:

  Configure<AbpBundlingOptions>(options =>
  {
      options.StyleBundles.Configure(
          BlazorLeptonXLiteThemeBundles.Styles.Global,
          bundle =>
          {
              bundle.AddContributors<MyBlazorStyleContributor>();
          }
      );
  });
  

  The default BlazorLeptonXLiteThemeStyleContributor still runs first and adds everything, then your contributor removes font-bundle.css and adds your font file instead. Since some of your users don't have internet access, local fonts would be the best approach for your scenario.

  Thanks

  Save Cancel