usr4896260 usr4896260 - 5 months ago 68
CSS Question

IIS 7 and font awesome .woff 404 error

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

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" />