@font-face not working on chrome or firefox

This has been happening on a couple of websites I've been developing as of late and I'm utterly confused why. None of the other answers on Stack Overflow seem to help me, nor any other resource I've found on google seem to have an answer for me. I'm thinking I'm doing something stupid, but what?

Here is the website I'm currently frustrated with: http://atonea.com/csj/

It won't work on Chrome or Firefox, but it will work on Safari. Which just doesn't make any sense to me.

Solution

You're only including the .ttf format which is for certain versions of WebKit, instead include multiple font formats for cross-browser support:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You also need to add the @font-face rule before using it on any element ..