Bootstrap glyphicons with virtual host

Question

I am trying to make glyphicons work with my local project!

i have created a virtual host called backend.mvc

now when ever i try to use glyphicons i get the following error:

"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.woff"
    glyphi...ar.woff
    "NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.ttf"

however the path exists execpt from the http:// so my question is how can avoid this and make the glyphicons work?

edit

Ive added the following to my head:

    <link type="application/font-woff">
    <link type="application/vnd.ms-fontobject">
    <link type="application/x-font-ttf">
    <link type="font/opentype">

However this did nothing :(

Update

Using apache

Also please note that this is for web and NOT mobile!

Answer 1

If you're absolutely sure that they're not in the incorrect place, then the most common cause I come across for problems like this when it comes to serving web-fonts is that the server isn't configured to serve the correct mime-type for the files.

According to HTML5 boilerplate these are the mime-types that you should be using when serving web fonts:

woff: application/font-woff

eot: application/vnd.ms-fontobject

ttf & ttc: application/x-font-ttf

otf: font/opentype

Answer 2

The fonts directory should be in the same dir as the css directory by default, not in the css subdirectory Also check your paths in the bootstrap.css