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?

Alexandraalexandre

Have you checked that it exists in your fonts directory? – Horoscopy

Yes it exists in directory. – Alexandraalexandre

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.

Autoerotic

@Alexandraalexandre try above settings. – Autoerotic

Answer 2

The same problem was resolved by adding for IIS the tags in Web.config in, under the Views folder.

Arte

"adding the tags" doesn't really answer anything. – Staffman

Answer 3

A small hack 1) search glyphicons-halflings-regular.woff 2) Copy glyphicons-halflings-regular.woff as glyphicons-halflings-regular.woff2 3) Put this is required folder. It worked in my case.

Vitascope