Choppy .ttf fonts in Firefox

Question

I recently started using the @font-face property in my project and it works wonderfully most of the time. However, I have noticed that some .ttf font files(downloaded from Fontsquirrel.com) look extremely choppy in Firefox but look great in Chrome. I know that .ttf files are supposed to work across both Firefox and Chrome and that seems to be case but the choppiness is pretty annoying. Could anyone provide a solution for this behavior and in general terms, suggest a reliable method for achieving cross-browser fonts?

Answer 1

I solved my problem by using the fontsquirrel webfont generator . It's an amazing tool that I recommend to anyone facing cross-browser font issues. Also, a format like this works in most situations:

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    src: url('../content/Fonts/roboto-regular-webfont.eot');
    src: url('../content/Fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../content/Fonts/roboto-regular-webfont.woff') format('woff'),
         url('../content/Fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../content/Fonts/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
}