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'); }
Improve this question
3
  • 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 (as opposed to .WOFF, which is supported by pretty much everything) Commented May 18, 2015 at 2: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 Commented May 18, 2015 at 6: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 Commented May 18, 2015 at 15:41

4 Answers 4

Reset to default
2

Assign mime type values:

mimeMap:

  • fileExtension=".woff"

  • mimeType="application/font-woff"

  • fileExtension=".woff2"

  • mimeType="application/font-woff"
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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" />
Improve this answer

Comments

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

Improve this answer

Comments

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.