99

ASP.NET MVC4 Bootstrap 3 application is running from Microsoft Visual Studio Express 2013 for Web IDE.

Chrome console shows always error

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

This file exists in the fonts directory in the Solution Explorer. Build action is set to "Content" and Copy to Output directory is "Do not copy like in other font files". Bootstrap 3 is added to the solution using NuGet. How to fix this so that this error does not occur? Application shows Glyphicon and FontAwesome icons properly. This error always occurs at application startup.

6 Answers 6

249

This problem happens because IIS does not know about woff and woff2 file mime types.

Solution 1:

Add these lines in your web.config project:

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

Solution 2:

On IIS project page:

Step 1: Go to your project IIS home page and double click on MIME Types button:

Step 1

Step 2: Click on Add button from Actions menu: Step 2

Step 3: In the middle of the screen appears a window and in this window you need to add the two lines from solution 1: Step 3

6
  • This solved it for me, but why? I would appreciate an explanation as to why the solution works more than just a mindless copy/paste of provided code.
    – Bpainter
    Dec 2, 2015 at 20:57
  • 3
    @Bpainter The first line in this answer tells you why. The mime types are not associated to a type so they fail to load by the browser. Why won't a browser load an un-associated mime type file? I think that's a separate question which I do not know the answer to. Dec 15, 2015 at 12:44
  • 4
    @CamilleSévigny I believe the answer to your question is that IIS only makes available valid file types, so since it does not recognize the .woff and .woff2 extensions, it responds to requests for these files with 404 - not found. Dec 21, 2015 at 18:22
  • @CamilleSévigny Thanks, when I made that comment, the first line was not there. It was edited in after the fact. Without your comment though I never would have seen it.
    – Bpainter
    Dec 22, 2015 at 18:59
  • In my case the problem was the CssRewriteUrlTransform that I used in the Bundle of bootstrap and Font-Awesome. If you preserve their normal folder structure, there is no need to use this option.
    – g_brahimaj
    Nov 16, 2016 at 11:05
53

In my case, I've just downloaded the missing file directly from here: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

2
  • 7
    solved it for me . Thanks. I downloaded the files, and saved the fonts folder under my project directory. CSS files in "css" folder, fonts in "fonts" folder
    – CyprUS
    Jul 6, 2016 at 15:51
  • 2
    At times solutions are pretty simple, and we are unaware of : ) Thnx for the solution, I missed this in my fonts folder in my MVC5 app
    – Irf
    Jun 29, 2017 at 6:48
11

Add this one to your html if you only have access to the html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
1
7

For me, the problem was twofold: First, the version of IIS I was dealing with didn't know about the .woff2 MIME type, only about .woff. I fixed that using IIS Manager at the server level, not at the web app level, so the setting wouldn't get overridden with each new app deployment. (Under IIS Manager, I went to MIME types, and added the missing .woff2, then updated .woff.)

Second, and more importantly, I was bundling bootstrap.css along with some other files as "~/bundles/css/site". Meanwhile, my font files were in "~/fonts". bootstrap.css looks for the glyphicon fonts in "../fonts", which translated to "~/bundles/fonts" -- wrong path.

In other words, my bundle path was one directory too deep. I renamed it to "~/bundles/siteCss", and updated all the references to it that I found in my project. Now bootstrap looked in "~/fonts" for the glyphicon files, which worked. Problem solved.

Before I fixed the second problem above, none of the glyphicon font files were loading. The symptom was that all instances of glyphicon glyphs in the project just showed an empty box. However, this symptom only occurred in the deployed versions of the web app, not on my dev machine. I'm still not sure why that was the case.

4

I tried all the suggestions above, but my actual issue was that my application was looking for the /font folder and its contents (.woff etc) in app/fonts, but my /fonts folder was on the same level as /app. I moved /fonts under /app, and it works fine now. I hope this helps someone else roaming the web for an answer.

0
1

This problem happens because IIS does not find the actual location of woff2 file mime types. Set URL of font-face properly, also keep font-family as glyphicons-halflings-regular in your CSS file as shown below.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.