IIS 7 and font awesome .woff 404 error

Question

I'm getting a 404 error when trying to load .woff, .woff2, and .ttf files in my MVC 5 application. Following the guidance of this post in which I have the same error, nothing seems to be working for me. Below is the following is what I currently have:

In my web config file

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

In IIS, I did the following steps:

1. Under connections, select MIME Types
2. Right Click and select "Add..."
3. For each file type, File name extension: .woff MIME type: font/x-woff

The error happens in both IE 11 and Chrome. Please help on how I can correct this.

Answer 1

After doing more research, the reason it was not loading properly was because of Bundling. In have the following in my files:

In my BundleConfig.cs:

bundles.Add(new StyleBundle("~/font-awesome/css").Include("~/fonts/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));

In my _Layout.cshtml file:

@Styles.Render("~/font-awesome/css")

I removed the two pieces of code above and added font awesome file directly the _Layout.cshtml file:

<link href="~/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />