CSS: @font-face anti aliasing

Question

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?

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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..

Solution 5

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/

View more solutions

Comments

[Ben Fransen]

Thanks for your answer, I'm trying it with sIFR now.

[Dinoel Vokiniv]

I can also recommend Cufón instead of sIFR, so that you don't need Flash to view the fonts (I'm thinking of all Flashblock users, and iPhone/iPad users, besides those who're just plain annoyed by Flash): cufon.shoqolate.com/generate

[GeekyMonkey]

Nice one! With white text you end up with a glowing effect, but it's kinda cool.

[commonpike]

developer.mozilla.org/en/CSS/font-smooth: font-smooth has been removed from the CSS font specification and is currently not on the standard track. Some mobile browsers support it. Webkit supports something similar.

[its_me]

Ahaha! Finally got you Mr. Windows! (Not really, but kinda, and that's good enough.)