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/