CODEWITHSUNDEEP
cssrenderingfont-face
Ben
Ben

Reputation: 11188

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

Upvotes: 21

Views: 71039

Answers (5)

lucasgabmoreno
lucasgabmoreno

Reputation: 1031

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

Upvotes: 2

Steve
Steve

Reputation: 355

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

Upvotes: 3

Rowan
Rowan

Reputation: 71

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/

Upvotes: 1

Chman
Chman

Reputation: 598

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.

Upvotes: 16

user9538
user9538

Reputation: 1014

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.

Upvotes: 64

Related Questions