Bootstrap woff2 font not getting loaded correctly

Question

Bootstrap font not loading correctly glyphicons-halflings-regular.woff2.

It shows the error in my Chrome-console.

Any solution to get it loaded properly, so that it doesn't show the error in the console?

Answer 1

Since you put a asp.net-mvc tag on your post, I'm giving you IIS configuration solution for you.

Chrome doesn't consume woff and throws 404 error when your web server isn't configured with MIME type 'woff' or 'woff2'.

---

You need to add IIS a MIME-TYPE for woff2. You can configure it in web.xml.

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

---

And you can also do this through IIS manager.

1. open IIS manager
2. Features View -> MIME Types
3. Actions -> Add
4. You will see add MIME Type box and put woff2 extension in the file extension ".woff2"
5. and MIME type as "application/font-woff2" as well.

---

IIS manager workthrough via images.