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?

What browser are you using? Because it looks fine here on Chrome. — egrunin, Apr 01 '13 at 15:14

score 2 · Accepted Answer · 2013-04-01T15:31:32.697

2

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;

edited Apr 01 '13 at 15:31

answered Apr 01 '13 at 15:17

! Thanks for you reply! In FF it looks perfect, but your ideas doesn't work in Chrome 25.0.1364.172 m. You can look here: http://postimg.org/image/dx1u7ykmv/ – acg Apr 01 '13 at 15:38
-webkit-font-smoothing works for mac OS safari only. http://stackoverflow.com/questions/8519768/does-webkit-font-smoothing-only-work-on-mac-browsers-not-windows – user568109 Apr 01 '13 at 15:47
1

Searching the internet it seems Mozilla browsers have issues with custom fonts for a long time now. Adding `font-weight: normal;` to the font-face might force the parser even more, but it's hardly a guarantee. Maybe you can try to convert the font to other formats (like `ttf` too) and check if Firefox might render them a bit prettier. Try my custom font-face with `ttf`: http://jsfiddle.net/Allendar/aKGam/2/ – Apr 01 '13 at 15:51
Ironic, that the browser that is always the most "against" closed-source content, renders `ttf` best in this case. Glad it worked tho; cheers :) – Apr 01 '13 at 16:06

CFF font with serrated

1 Answers1