26

I've used http://www.fontsquirrel.com/ to create a @font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
Font face on Mac this is the result on Mac with FF, Chrome or Safari (all updated to last version).
Font face on Windows this is the result on Windows with FF or Chrome.

As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?

S.L. Barth is on codidact.com
  • 8,198
  • 71
  • 51
  • 66
pasine
  • 11,311
  • 10
  • 49
  • 81

8 Answers8

48

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

Chrome didn't like the default fontsquirrel.com 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 the top of the list. Now I see anti-alias 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 it works for you too. Enjoy!

maximo
  • 1,101
  • 9
  • 16
  • I was using Open Sans from google web fonts and after reading this checked what fonts were included in the package. It only returns the woff file so i went to fontsquirrel, downloaded the package and applied your fix, it worked! It's weird because on googles web fonts site they suffer from the lack of anti-aliasing as well. – madcapnmckay Jul 26 '12 at 18:09
  • 1
    @tq Yeah, this used to work before; up until version 18 or 19 I think, now it renders SVG text the same way it renders normal text. :( – omninonsense Nov 14 '12 at 19:12
  • I haven't seen any changes in my sites on Chrome Version 23.0.1271.64 m. Feel free to PM me, I wouldn't mind taking a look to try and duplicate or help with the issue. – maximo Nov 16 '12 at 13:48
  • 1
    It works fine for me, version `25.0.1364.152 m` and fonts `KaushanScript` and `Ubuntu`. – Bastien Jansen Mar 12 '13 at 12:25
  • 1
    Worked perfectly for me in chrome in windows, with firefox not so much. – Sem Jul 15 '13 at 14:42
  • This was broken in V22/23 but has been fixed once again. Anyone using a modern version will be okay with this solution. Verified working in 29, 30, 31, and the newest 32. – Mike P. Jan 17 '14 at 20:20
  • Using SVG all the time isn't the best way, since SVG lacks hinting information. Without hinting the font looks more blurry than it has to on systems with font-smoothing enabled. Therefore I wrote [a small script called Font Smoothie](https://gist.github.com/letorbi/5177771), which detects if font-smoothing is enabled and corrects the CSS only if needed. I also created [a webfont generator named Fontie](http://fontie.flowyapps.com/), which takes a otf or ttf and generates a package with proper hinted webfonts, CSS and Font Smoothie for you. – Torben Jan 31 '14 at 18:14
14

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

-webkit-text-stroke: 0.5px;

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

Pere
  • 1,068
  • 12
  • 20
  • Doesn't work for me here (Chrome 24 / Win XP / ClearType disabled). – Torben Mar 17 '13 at 16:30
  • What are the effects on this in OSes like OSX that render the font properly by default? Will it make it extra strong? – TCB13 Apr 30 '13 at 10:30
  • Works on Chrome 26.0.1410.64 Windows 7 ClearType enabled. But it's still a hack. Not the same font anymore. – OneWorld May 21 '13 at 14:53
  • I've recently had issues with setting a text stroke global when working with mobile drop down menus using jQuery as it sometimes causes a 'lag' in the slideDown/slideUp/slideToggle effects, so I'm a little cautious about using this css method now. – Harry Finn Jul 22 '13 at 09:01
9

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

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

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

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

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

but I seriously wouldn't recommend it.)

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

bobince
  • 528,062
  • 107
  • 651
  • 834
  • I've tried to enable ClearType on Windows, but the problem persist. I'm checking the GASP table as well, but: do you see other solutions? do you think that using a different font type (woff, eot, svg, etc..) can change something? – pasine Oct 31 '10 at 13:57
  • I don't think so, no. Converting the outlines to Type 1 format beziers instead of TTF splines can make a difference to the renderer used for non-ClearType font smoothing, but that's a pretty drastic step. Could you put the font up somewhere to check? Oh, another thing: does the jaggy rendering occur *everywhere* you use the font, even in a trivial test page? There are other reasons anti-aliasing can get turned off, in particular when you use an IE `filter` style (typically to reproduce `opacity`). – bobince Oct 31 '10 at 14:55
  • The font is Myriad Pro (that is a standard font on a Mac, but not on Win). If you want I can PM you the site I'm developing so that you can see it live. – pasine Oct 31 '10 at 15:06
  • OK, but bear in mind that the Mac-bundled Myriad is not licensed for web embedding. As I understand it, at the moment, the only legal way to embed Myriad is via Typekit. – bobince Oct 31 '10 at 22:04
  • I hadn't considered the legal issue. I will replace with images or use an alternative font. Thanks for your great help! – pasine Nov 01 '10 at 16:51
  • It helps me to solve anti-aliasing problem: http://stackoverflow.com/a/13366787/1002639 – Anthony Nov 13 '12 at 18:48
5

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

Maximilian Motel
  • 51
  • 1
  • 1
    +1 there are lots of fonts that look like Myriad, or rather Frutiger, which is the font Myriad was ‘influenced’ by. “Humanist sans that looks like Frutiger” is almost a genre of its own now! – bobince Nov 05 '10 at 17:22
4

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

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

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

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
Sparky
  • 43
  • 1
  • 1
  • 4
  • 1
    For me the antialising does not apply until `rotate(-0.03deg)`. Also, in the Canvas you can do `setTransform(1, 0.001, 0, 1, 0, 0)` and it also get antialised. – Zequez Oct 29 '11 at 23:18
  • 1
    Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – Zequez Nov 04 '11 at 15:28
3

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

The 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 16.0.912.63 m, Windows Vista.

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

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
Lubo Zviera
  • 51
  • 1
2

This is code im using to fix "Chrome rendering 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!

Danilo Valente
  • 11,270
  • 8
  • 53
  • 67
apofiSSo
  • 21
  • 1
0

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

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

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

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

Community
  • 1
  • 1
Matt Williams
  • 86
  • 1
  • 10