CSS: @font-face anti aliasing

Ben Fransen picture Ben Fransen · Aug 10, 2010 · Viewed 69.2k times · Source

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 away?

Answer

user9538 picture user9538 · Oct 25, 2010

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.