Search code examples
htmlcssfont-facetruetype

CFF font with serrated

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?

Solution

  • 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

    enter image description here

    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;