bundling css works but fonts not loading

Question

I have the following folders structure in my MVC site:

-- Content -- Notebook -- css

-- Content -- Notebook -- fonts

Content is directly under the root for the site. In my css folder i have a file which has a relative path

url('../fonts/fontawesome-webfont.woff?v=4.0.3')

My bundle currently looks like:

bundles.Add(new StyleBundle("~/bundles/Content/Notebook/css").Include(
        "~/Content/Notebook/css/animate.css",
        "~/Content/Notebook/css/font.css",
        "~/Content/Notebook/css/font-awesome.min.css",
        "~/Content/Notebook/css/app.css"
));

This is rendered using

@Styles.Render("~/bundles/Content/Notebook/css")

this works for the css files, but the font file isn't loading, i see that it is looking for it here http://localhost/MySite/bundles/Content/fonts/fontawesome-webfont.woff?v=4.0.3

I saw that and then tried to change my bundle name to

~/Content/Notebook/css

thinking that would get the relative path to work also, if i remove the "bundles" from the name, but doing that causes the css files not to load. Why wouldn't the css files load? If I had the word "bundles" back to the name it works again. Also any idea on how to get the fonts to load along with the bundle?

Answer 1

When you do this:

url('../fonts/fontawesome-webfont.woff?v=4.0.3')

you are referring to the fonts via a relative path. If you then put your CSS bundle at /bundles/Content/Notebook/css it will look in bundles/content/fonts since that's combination of your relative path and where the browser see your css-file.

A few possible options (either):

• Change your bundle path:

  bundles.Add(new StyleBundle("~/Content/Notebook/css") ...
  (the reason your css files didn't load when you removed bundles was that you didn't change the name of the stylebundle)
  

  and

  @Styles.Render("~/Content/Notebook/css")
  

• Reference your fonts with an absolute path:

  url('/Content/notebook/fonts/fontawesome-webfont.woff?v=4.0.3')