How to solve glyphicons-halflings-regular.woff2 Err_Aborted issue in ASP.Net MVC 5

Question

So I have a project where I want to change the theme of BootStrap. So, I took theme from BootSwatch and the theme is selected is Lumen. Now in my Bundle.Config file, I made below changes.

  bundles.Add(new StyleBundle("~/Content/css").Include(
                      //"~/Content/bootstrap.css",
                      "~/Content/bootstrap-lumen.css",
                      "~/Content/superslides.css",
                      "~/Content/site.css"));
        }

Now as soon as I start using the Lumen Theme, I get error (in dev tool) as below:

P.S: This does not happen when I use normal BootStrap theme. I looked into SO Answer. But it talks about making IIS changes and all. But my problem only occurs when I use LUMEN theme. How to get rid of this issue?

Solution 1

I have downloaded the missing files from here and added those in fonts folder of my project.

Then added these lines within <system.webServer> section in web.config file of my project:

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

In your case, download glyphicons-halflings-regular.woff2 file.

Solution 2

As an alternate to Reyan Chougle's answer, this can also be fixed through IIS:

1. Open IIS, click on your site.

2. In the middle section, under the grouping IIS, double-click MIME Types

3. Edit or add woff and/or woff2 extensions:
   • .woff -> application/x-font-woff
   • .woff2 -> application/font-woff2

NOTE: Tested on IIS 8.5 in the Chrome web browser

Solution 3

I was facing the same issue.

In first attempt, I have added the MIME type (font-woff2) directly at the IIS server, it worked. However after deployment(CI/CD) MIME type automatically got removed.

In Second attempt, I have added staticContent tags in web.config and it worked like a permanent fix.

Solution 4

Try adding the missing file via CDN:

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

View more solutions