@font-face working when local but not when upload to hosting space

Question

I am building a website and I attempting to get cross-browser compatibility with a free font named Tex Gyre Cursor. So far I have tried several ways which I have found searching though Google.

Site 1, Site 2 & Site 3

They have worked when testing them locally on Chrome, Firefox, Safari and Opera. Not on IE though. I'm not to bothered about IE since it's a massive pain in the arse and I have set Tahoma as the back-up font for this.

The problem arises after I have uploaded my files via FTP File Manager. The web host is GoDaddy.

I have uploaded the font files too.

I visit the site but the font is Tahoma, this occurs on all browsers previously mentioned.

I'm at my wits end and cannot discern the problem.

This was my first attempt with the CSS:

@font-face{    
    font-family:'TexGyreCursor';
        src: url('fonts/texgyrecursor.eot');
        src: local('texgyrecursor'), 
             local('texgyrecursor'), 
             url('fonts/texgyrecursor.ttf') format('truetype'),
             url('fonts/texgyrecursor.svg#font') format('svg'),
             url('fonts/texgyrecursor.otf');
}

My second attempt:

@font-face{
    font-family:'TexGyreCursor';
    src: url('fonts/texgyrecursor.eot');
    src: url('fonts/texgyrecursor.otf');
}

If anymore information is needed please let me know :)

Answer 1

I recently had this issue, I was designing on windows machine with xampp and uploading to linux server. I finally figured out that the font files were CamelCase and the css code was all lowercase.

It didn't bother my local machine, but linux sees CAPITALS.font and capitals.font as 2 seperate files.

You might want to check to see if that is issue your having.