@font-face works locally but not on live website

I have a website in production which uses @font-face to render fonts, and this works fine in a local environment but fails when uploaded to the live website.

The CSS file which links to the font files is in the root directory, and uses the following code:

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('css/fonts/ColabLig-webfont.eot');
    src: url('css/fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/ColabLig-webfont.woff') format('woff'),
         url('css/fonts/Co开发者_C百科labLig-webfont.ttf') format('truetype'),
         url('css/fonts/ColabLig-webfont.svg#webfontR2xcGGVv') format('svg');
    font-weight: normal;
    font-style: normal;

}

The font is in the /css/fonts/ directory. I have tried adding the following to an .htaccess file to try fix the issue but still to no avail:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

I'm out of ideas really! I just find it very strange how I have no problems across browsers when viewing with XAMPP, but when I try and view it on my server (which is Apache) it wont work on any browser.

---

Check your CHMOD settings on the folders and make sure the server's not sending you a 403 back