@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 have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !@?#.

In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:

CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

I'd suggest following a thread I opened a few months ago which might help: @font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.

For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:

@font-face {
    font-family:'My-Font';
    src:url('../includes/fonts/my-font.eot');
    src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/my-font.woff') format('woff'),
            url('../includes/fonts/my-font.ttf') format('truetype'),
            url('../includes/fonts/my-font.svg#my-font') format('svg');
    font-weight:normal;
    font-style:normal;
}