404 Error while loading fonts

I've my site structure as below

root
|
|-- ProjectDir
    |
    |-- fonts
    |   |-- my-webfont.woff
    |
    |-- css
    |   |-- vendor
    |       |-- my-style.css
    |
    |-- rent.html

In "my-style.css" file, font is linked using a site-root-relative url

url('/fonts/my-webfont.woff')

I use a local webserver to view

http://localhost/ProjectDir/rent.html

But my fonts are not loading and when I try to load

http://localhost/fonts/my-webfont.woff

it shows a 404 Error (File Not Found).

You can see the my git repo here: https://github.com/abhisekp/House-Rent-Calculator and see the fonts/ directory.

And loading the font file using the web server shows 404 Error. See here: https://abhisekp.github.io/fonts/fontawesome-webfont.eot

What's wrong with all this? My local server also behaves this way.

Solution

Thanks everyone. I found the bug.

Actually, the problem was the root itself. When viewing using https://abhisekp.github.io/House-Rent-Calculator address, the root is "abhisekp.github.io/" not "abhisekp.github.io/House-Rent-Calculator/" hence the @font-face urls refer to the former rather than the later.

The fonts lies under "House-Rent-Calculator/" directory. I fixed it by using a relative link (safe for everything if "fonts/" & "css/" directories are not changed frequently).

No more root-relative links as I test using various servers and my "House-Rent-Calculator/" directory might be anywhere in the server.

Better be safe than sorry! ;-)