56

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?

tshepang
  • 12,111
  • 21
  • 91
  • 136
Zafar
  • 3,394
  • 4
  • 28
  • 43
  • Is the issue only with fontFaces.css or any other css files also are not loading – Rameez Ahmed Sayad Sep 25 '13 at 09:32
  • only with font-face. the page looks as it is, but not fonts. other css files are successfully being compressed. without enabling optimization mode, the fonts are also loading. – Zafar Sep 25 '13 at 09:35
  • I suspect something is happening while compressing fontFaces.css , if there was an issue in css syntax , it would atleast given a error while the browser tried to retrieve. right now you can move just @font-face part of code and see if things work enabling optimization. – Rameez Ahmed Sayad Sep 25 '13 at 09:46

5 Answers5

39

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

Liam
  • 27,717
  • 28
  • 128
  • 190
Mahmoud Ibrahim
  • 1,703
  • 15
  • 15
  • 6
    When you deploy to IIS you will probably find this useful, http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/ – SimonGates Sep 25 '13 at 15:25
  • 3
    I had a problem with your answer: it will not work in debug mode because the fonts will be referenced below the style folder, so here is how I solved it: I have a Content/css folder and a Content/fonts folder. I set the bundle virtual path to "~/Content/css/styles", this way I didn't have to remove the "../" from the font reference because the fonts folder will remain one level above the "styles" file. That said, it keeps working fine in debug mode because the paths depth remain the same. – Boanerge Nov 11 '15 at 19:26
  • 5
    i had the same issue to access font awesome fonts, for **other solutions** try these links which deals with `StyleBundle` **virtualpath**: [Link 1](http://www.mvccentral.net/story/details/articles/kahanu/stylebundle-403-error-solved) , [Link 2](http://forums.asp.net/t/1774324.aspx?MVC4+css+bundling+and+image+references), [Link 3](http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/), [Link 4](http://jameschambers.com/2014/08/adding-some-font-awesome-to-mvc-and-bootstrap/) , hope this helps someone. – Shaiju T Feb 25 '16 at 09:39
  • For me, the easiest solution to not have your fonts and other css resources break is to keep your bundles at the same depth. For example, if you are bundling `~/content/file.css` call the bundle `~/content/file_bundle` and you shouldn't have any issue between debug and release. – aleith Feb 05 '19 at 13:53
  • @Boanerge, I wish you had posted your comment as an answer so I could up vote. Your method worked for me – Andrew Steitz Mar 22 '22 at 15:40
  • 1
    Hahahaha... reading my comment and I still don't remembre writing it, it was so long ago. @AndrewSteitz – Boanerge Mar 23 '22 at 18:57
33

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.

Snuffler_71
  • 376
  • 3
  • 6
8

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.

Matt
  • 551
  • 5
  • 4
1

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.
Melanie Sumner
  • 180
  • 1
  • 2
  • 16
0

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.

user3088037
  • 83
  • 6