html - Fonts not rendering uniformly in browsers

Question

I am trying to use custom fonts on my website and in the css I have the following code:

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/Sketch.eot');
    src: url('../fonts/Sketch.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
ul#holder {font-family:'Sketch'}

The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)

In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?

Answer 1

Different browsers supports different font formats:

So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).

And then, you can import them like that:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.

And, anyway, their appearance may differ a little in different browsers.