CFF font with serrated

Question

I'm using a CFF font on my page, but it's showing serrated in the browser.

Here you can see how I'm using it: JSfiddle

HTML

<p>Hello everyb@dy!</p>

CSS

body{
    font-size: 10px;
}

@font-face {
    font-family: Planer_ExtraLight;
    src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
        url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
        url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');   
}

p{
    font-family: Planer_ExtraLight;
    font-size: 4em;
}

Anyone can help me with it?

Answer 1

This should work: http://jsfiddle.net/Allendar/aKGam/1/

p {
    font-family: Planer_ExtraLight;
    font-size: 4em;
    font-smooth: subpixel-antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}

Result

Update

Check the MDN. It seems to not work in most browsers. You might try to look into similar functions of -webkit-font-smoothing in other browsers to add to your styling.

The increase in quality I'm seeing in Safari is humongous tho!

Update 2

I found this might work in Firefox;

browser.display.auto_quality_min_font_size = 0; // default = 20

.. where lower means better quality and slower rendering and vice versa.

Update 3

This is interesting too (https://developer.mozilla.org/en-US/docs/CSS/text-rendering);

text-rendering: geometricPrecision;