CODEWITHSUNDEEP
jspspring-mvcfontstwitter-bootstrap-3http-status-code-404
henrycharles
henrycharles

Reputation: 1041

glyphicons-halflings-regular.woff2 not loading 404 error

I have tried a lot and have seen so many answers but none is helping me out here. I am not sure why the glyphicons-halflings-regular.woff2 not able to load even i have latest bootstrap version.

Bootstrap 3 unable to display glyphicon properly

Directory Structure

enter image description here

Error

enter image description here

@font-face rule in css

   @font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Upvotes: 3

Views: 10192

Answers (4)

bamossza
bamossza

Reputation: 3926

I modified file: (applicationhost.config) :: Add mimeMap

Go to %UserProfile%\Documents\IISExpress\config\applicationhost.config

Find

<mimeMap fileExtension=".woff" mimeType="font/x-woff" />

Change or Add

<mimeMap fileExtension=".woff" mimeType="font/woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />

Upvotes: 1

TBuc
TBuc

Reputation: 86

Add the following elements to your web.xml, immediately within the <web-app> tag:

<mime-mapping>
    <extension>.woff</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>

  <mime-mapping>
    <extension>.woff2</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>

Upvotes: 0

Rajesh Chandrashekar
Rajesh Chandrashekar

Reputation: 51

CSS Font refernce such as Bootstrap are usually relative:
src:url(../fonts/glyphicons-halflings-regular.eot)

So create two folders like this

bootstrap bootstrap.min.css bootstrap.min.js fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff

So the css can be reference as: <link rel="stylesheet" href="resources/bootstrap/bootstrap.min.css">

Hope this helps

Upvotes: 0

Domingo Trujillo
Domingo Trujillo

Reputation: 21

Assign mime type values:

mimeMap:

  • fileExtension=".woff"

  • mimeType="application/font-woff"

  • fileExtension=".woff2"

  • mimeType="application/font-woff"

Upvotes: 2

Related Questions