Css binding works, but fonts don't load

Question

I have the following folder structure on my MVC site:

- Content - Notepad - css

- Contents - Notepad - fonts

Content is right under the root of the site. In my css folder, I have a file with a relative path

URL ("../fonts/fontawesome-webfont.woff? V = 4.0.3 ')

My package currently looks like this:

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 displayed using

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

this works for css files, but the font file does not load, I see that it is looking for it here http://localhost/MySite/bundles/Content/fonts/fontawesome-webfont.woff?v=4.0.3

I saw this and then tried changing the name of my package to

~ / Content / laptop / CSS

thinking, which will also relate the relative path to work if I remove the "bundles" from the name, but this leads to the css files not loading. Why css files are not loading? If I had the word “bundles” back to the name, it works again. Also any idea on how to download fonts with the package?

Answer 1

When you do this:

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

You refer to fonts through a relative path. If you put your CSS set in /bundles/Content/Notebook/css , it will look in bundles/content/fonts with that combination of your relative path and where the browser will see your css file.

Several possible options ():

• Change the package 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") 

• Link to fonts with an absolute path:

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