CODEWITHSUNDEEP
c#asp.netasp.net-mvcbundlefont-face
Zafar
Zafar

Reputation: 3434

Font files are not loading with ASP.NET Bundles

In my ASP.NET MVC application, I'm using Bundles to compress css and js files. The problem is - the fonts are not loading after i enable the optimization mode. 

BundleTable.EnableOptimizations = true;

Here is the C# code

public static void RegisterBundles(BundleCollection bundles) {
    RegisterStyles(bundles);
    BundleTable.EnableOptimizations = true;
}

private static void RegisterStyles(BundleCollection bundles) {
bundles.Add(new StyleBundle("~/BundleStyles/css").Include(
    "~/Content/Styles/bootstrap/bootstrap.css",
    "~/Content/Styles/reset.css",
    "~/Content/Styles/gridpack/gridpack.css",

    "~/Content/Styles/fontFaces.css",
    "~/Content/Styles/icons.css",

    "~/Content/Styles/inputs.css",
    "~/Content/Styles/common.css",
    "~/Content/Styles/header.css",
    "~/Content/Styles/footer.css",
    "~/Content/Styles/cslider/slider-animations.css",
    "~/Content/Styles/cslider/slider-base.css"));
}

And here is the css for fonts.

   @font-face {
      font-family: ProximaNova;
      src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
      font-weight: bold;
      font-style: normal;
    }

Here is how CSS is beeing referenced in the page.

<link href="/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

However, when i checked with Chrome Debugger tool, the font files are not loading to the page and my page looks bad with wrong fonts.

What am I doing wrong?

Upvotes: 57

Views: 57155

Answers (5)

user3088037
user3088037

Reputation: 93

Spent some time looking for the solution of this issue. Nothing worked until I found this post: https://mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc

In a nutshell: make sure that paths that reference bundles do not overlap with web app file folder structures. In my case a css bundle had a path like it was a file located in ~/Content/css folder. I have renamed the bundle reference to "~/css" (no file folder with this name) and the error has disappeared.

Upvotes: 0

Mahmoud Ibrahim
Mahmoud Ibrahim

Reputation: 1731

Well, I think the problem is with your font location. I'm assuming that the bundled css virtual location /BundleStyles/css doesn't actually exist. and if your folders structure like below

Content > Font

Content > style

If this is true, then try this

change /BundleStyles/css to /Content/css

<link href="/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

and reference your font like this 

src: url('Fonts/ProximaNova/ProximaNova-Bold.otf')

in this case your font will be loaded relative to the "css" file which is located inside the content folder which also contains the "fonts" folder

If what I assumed is incorrect please show us how you structured your files

Upvotes: 39

Snuffler_71
Snuffler_71

Reputation: 386

I think CssRewriteUrlTransform might be the way to go:

https://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx

Used like so:

.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())

Worked for me.

Upvotes: 34

Melanie Sumner
Melanie Sumner

Reputation: 180

I went looking online for this today because I am running into this issue. Here's what worked for me:

  1. The /bundle/ wasn't actually an issue (I tried this first)
  2. I changed single quotes to double quotes & the fonts worked - but no idea why, so if someone knows please feel free to elaborate.

Upvotes: 1

Matt
Matt

Reputation: 551

Great answer above.

An alternative - if for some reason the above didn't work for you - would be to change how the @font-face src property references the 'Fonts' folder. '../'-ing doesn't work very well for bundling so reference directly from the site root folder instead. Assumung the 'Fonts' folder is one down from the root, change this:

@font-face {
  src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

To this:

@font-face {
  src: url('/Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

You will retrieve the same results when the site is ran in debug mode too.

Upvotes: 8

Related Questions