Font files are not loading with ASP.NET Bundles

Question

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?

Answer 1

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.