Custom Font Embedding DOES NOT WORK Cross-Browser

Question

I have have "Gulim", a custom font, embedded into my website at mangodownload.com (you can see it on the homepage, if you see Arial, it does not work on your browser.)

Unfortunately, this font does NOT work on many browsers.

Here is my CSS for the font:

@font-face { 
    font-family: "Gulim";
    src: url("/style/fonts/Gulim.ttf");
    src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}

Any ideas on achieving cross-browser support for ALL browsers?

PLEASE NOTE: I have tried converting the font, and tried FontSquirrel. I keep receiving the same message; 'font size too large'. My gulim.ttf file is 10mb.

Answer 1

@font-face {
    font-family: 'yourfunkyfont';
    src: url('fonts/yourfunkyfont.eot');
    src: url('fonts/yourfunkyfont.svg') format('truetype'),
         url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/yourfunkyfont.woff') format('woff'),
      url('fonts/yourfunkyfont.ttf') format('truetype'),
      url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}

this will work only if you add the following MIME-types in your IIS (other webserver):

.woff - application/x-font-woff
.svg - application/x-font-woff