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?

score 64 · Answer 1 · answered Oct 25 '10 at 06:02

64

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.

answered Oct 25 '10 at 06:02

user9538

995
1
11
9

Nice one! With white text you end up with a glowing effect, but it's kinda cool. – GeekyMonkey May 01 '12 at 14:56
Ahaha! Finally got you Mr. Windows! (Not really, but kinda, and that's good enough.) – its_me Jun 24 '12 at 04:46

score 16 · Accepted Answer · edited May 02 '11 at 21:21

16

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.

edited May 02 '11 at 21:21

bzlm

9,626
6
65
92

answered Aug 10 '10 at 17:41

Chman

598
4
8

Thanks for your answer, I'm trying it with sIFR now. – Ben Fransen Aug 10 '10 at 19:29
7

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): http://cufon.shoqolate.com/generate/ – Jonas Aug 30 '10 at 08:30
8

https://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. – commonpike May 20 '12 at 22:34

Steve · Answer 3 · 2013-12-29T05:12:02.863

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

score 2 · Answer 4 · answered Jan 05 '16 at 15:35

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

score 1 · Answer 5 · answered Sep 09 '11 at 06:46

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/

CSS: @font-face anti aliasing

5 Answers5

Linked