3

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.

Community
  • 1
  • 1
usr4896260
  • 1,427
  • 3
  • 27
  • 50
  • 1
    Firefox loads them properly? – Mr. Hugo May 31 '16 at 20:47
  • 2
    I knoe you're using IIS7 but have you tried these suggestions? Seems like using application/font-woff2 instead of font/x-woff2 might work: http://stackoverflow.com/questions/25796609/font-face-isnt-working-in-iis-8-0 – mmmoustache May 31 '16 at 21:19

1 Answers1

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" />
usr4896260
  • 1,427
  • 3
  • 27
  • 50