[ACCEPTED]-@font-face anti-aliasing on windows and mac-font-embedding

Accepted answer
Score: 48

I too have been plagued with this on Chrome 6 and I think I've just found the answer!

Chrome 5 didn't like the default fontsquirrel.com 4 generated CSS.

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
         url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
    font-weight: normal;
    font-style: normal;
}

To fix, i moved the SVG line:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

to 3 the top of the list. Now I see anti-alias 2 fonts! I guess Chrome wants to be first...

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Hope 1 it works for you too. Enjoy!

Score: 14

I'm surprised no one mentioned this. Applying 9 a slight -webkit-text-stroke does the trick 8 for me whatever the format (extension) of 7 the font you are using. Some recommend a 6 -webkit-text-stroke: 1px but to me it alters 5 the font look too much (make it too strong). But 4 a 0.5px one makes the stroke almost unnoticeable 3 and it turns on the antialiasing:

-webkit-text-stroke: 0.5px;

Put it 2 in your css definition for html tag and 1 you're done!

Score: 9

This just looks like the normal ugly way 27 fonts are rendered in WinXP. Some (IMO: misguided) people 26 even prefer it.

To get anti-aliasing for 25 desktop fonts in general on XP you have 24 to turn it on, from Display Properties -> Appearance 23 -> Effects -> Use the following method 22 to smooth edges of screen fonts -> ClearType. The 21 default setting “Standard” is the old-school 20 Windows “font smudging” technique that only 19 bothers to turn on at larger font sizes, and 18 then often makes a mess.

IE7+ has an option—on 17 by default—to always use ClearType anti-aliasing 16 to render fonts in the web browser. Other 15 web browsers will respect the user's configured 14 font rendering method. It is a shame that 13 so many people still have this beneficial 12 setting turned off, but it's not really 11 your problem.

(There is nasty hack to make 10 Chrome perform some anti-aliasing on text, which 9 is:

text-shadow: 0px 0px 1px rgba(0,0,0,0);

but I seriously wouldn't recommend it.)

One 8 thing you can do when the “Use the following 7 method...” setting is set to “Standard”, to 6 try to make the font get some form of anti-aliasing, is 5 to check that the font in question doesn't 4 have a GASP table telling old-fashioned TrueType 3 renderers to disable anti-aliasing at particular 2 font sizes. You can change the GASP table 1 using a font editor or with the ttfgasp.exe command-line tool.

Score: 5

There is also a font called Vegur that looks 2 like Myriad Pro but is legal to embed in 1 a website. Hope that helps!

Score: 4

I've done a little research, and I've found 5 a hack that I think makes a difference. Put 4 this in your CSS with your font variables:

-webkit-transform: rotate(-0.0000000001deg);

As 3 well, I find that a full-on black (#000000) doesn't 2 help matters either. Using a very dark seemed 1 to help me.

Score: 3

Changing setting in Windows or a browser 6 itself is not a solution. When you use @font-face, you 5 want the font to look nice on every screen 4 in every browser, not just in yours.

The 3 trick with

text-shadow: 0 0 1px rgba(255,255,255,0.1);

or

-webkit-transform: rotate(-0.0000000001deg);

doesn't work anymore in Chrome 2 16.0.912.63 m, Windows Vista.

I couldn't 1 find a way to overcome this issue though.

Score: 2

This is code im using to fix "Chrome rendering 1 problem":

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) it works for me...FINALLY!

Score: 0

-webkit-transform: rotate(-0.0000000001deg);

Update: No 6 longer working in Chrome 15.0.874.106 m. Though 5 it does work in IE9 and Firefox – >Zequez 4 Nov 4 at 15:28

UPDATE: This is working (at 3 least for me) in Chrome 15.0.874.121 m.

IE9 2 and Firefox shouldn't need it, or be targeted 1 by it since the selector specifies -webkit-.

More Related questions