CSS: @font-face anti aliasing

I'm a bit struggling with the @font-face CSS option. After a lot of reading, trying, retrying I finally came across a website that makes you a ready-to-go package when you upload your font. It's running now but it seems the font doesn't get anti-aliased. While I see this happening at other websites, mine does not render the headings the way I want.

My CSS code:

@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}

What is left to do to make this last, but anoying, issue go awa开发者_如何学JAVAy?

Also see: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

The gist is that adding text-shadow: 0 0 1px rgba(0,0,0,0.3); gives the appearance of anti-aliasing.

With CSS3, you can use the font-smooth property, although antialiasing will still be controlled by the system defaults. If you really need to force a clean antialiasing no matter what the OS is, you have to use sIFR which automatically replace the text with a Flash component.

Just a short note about a not so common CSS rule to deal with antialias.

-webkit-font-smoothing: antialiased;

You will have a slight variation in the font rendering for webkit browsers. Generally the font appear more clear and thin. Other values:

-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;

A demo page: http://maxvoltar.com/sandbox/fontsmoothing/

Not to forget https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

You need to convert OTF to WOFF:

OTF -> WOFF (Works!)

TTF -> OTF -> WOFF (Works!)

TTF -> WOFF (Doesn't work antialising, common mistake in Google Fonts)

1º) Download the OTF font version

1º alternative) If the font is other and is TTF, convert it to OTF with https://everythingfonts.com/ttf-to-otf

2º) Convert OTF to WOFF https://everythingfonts.com/otf-to-woff

Use only WOFF not EOT, SVG, WOFF2, etc..

Cufon and Typeface.js are two solutions that aggregate and sanitize a lot of the HTML5, CSS3 and JS solutions discussed in this thread.

Each has a converter allowing font files (ttf, otf, wotf) to be converted to scripts that do what you're trying to do -- deliver any font over the web, antialiased.

Of the two, I prefer Cufon http://cufon.shoqolate.com/generate/