3

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');
}
Community
  • 1
  • 1
henrycharles
  • 1,019
  • 6
  • 28
  • 66
  • What are your @font-face rules? Can you see your fonts if you just straight up type their URL in the browser to download them? Also note that WOFF2 [isn't very widely supported yet](http://caniuse.com/#search=woff2) (as opposed to .WOFF, which is supported by [pretty much everything](http://caniuse.com/#feat=woff)) – Mike 'Pomax' Kamermans May 18 '15 at 02:33
  • 1
    @Mike'Pomax'Kamermans No I am not able download them if i type their URL in browser and I have added the font-face rule it is exactly as same as bootstrap provided no alteration on css have been made.I am not able to recognize why this happens – henrycharles May 18 '15 at 06:26
  • this is way too many font versions. just the WOFF will do, with .eot if you absolutely must support ancient IE versions. With that said, can you add which locations you tried in the browser to see if your files download? e.g. when the server's running and you try localhost/fonts/glyphicons-halflings-regular.eot, what's the response? If you put a test.html in that dir, can you get to that file or is it also nonexistent, if you put it one dir up, can you get to it, etc – Mike 'Pomax' Kamermans May 18 '15 at 15:41

4 Answers4

2

Assign mime type values:

mimeMap:

  • fileExtension=".woff"

  • mimeType="application/font-woff"

  • fileExtension=".woff2"

  • mimeType="application/font-woff"
Domingo Trujillo
  • 21
  • 2
1

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" />
MMalke
  • 1,857
  • 1
  • 24
  • 35
bamossza
  • 3,676
  • 1
  • 29
  • 28
0

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

Rajesh Chandrashekar
  • 41
  • 1
  • 1
  • 8
0

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>
TBuc
  • 86
  • 1
  • 6