So I've got a question for everyone: what's with the current fascination with using imported fonts that (on certain OS's/browsers), don't have AA. I love good typography as much as the next geek, but is it really so important to have that flashy font that you used in Photoshop, if it looks rubbish on your site for a large number of users?<p>@Developers: What's your take on using these fonts against using normal ones?<p>@Designers: Would you rather have a font that's correct against initial design, or an anti-aliased one that isn't?<p>Examples: custora.com, locations on creativemornings.com, elated.com post titles. YMMV looking at these, based on what your OS/browser combo is.
Whether the font is anti-aliased or not depends on the operating system settings, not on the font itself.<p>That said, I do notice that some custom web fonts look ugly on Windows due to the very crisp quality of the rendering engine, especially when Cleartype is enabled. Those fonts look a lot better on Linux and Mac browsers.<p>Therefore, whenever I choose to use a custom web font and know that my target audience includes Windows users I give more attention to selecting a proper font and testing how it renders on the page.<p>I encourage the use of embedded fonts over traditional techniques such as image replacement, because the text looks and behaves the same as it would in other applications on the user's computer.<p>(I'm a developer doing some design on the side)
Add text-shadow: 0px 0px 1px rgba(0,0,0,.05); (Or any other text-shadow value)<p>This makes a huge difference in Windows Chrome as it apparently causes the font to take a different rendering path.<p>Don't use text-rendering: optimizeLegibility; It ends up doing either nothing or making things look worse on some mobile webkit browsers.
For css -webkit-font-smoothing you may try between "antialiased" and "subpixel-antialiased", then there is css text-rendering: optimizeLegibility.<p>Also you should notice a bug in Safari for OS X that turns off antialiasing: <a href="http://seanmcb.com/typekit/webkit-antialiasing-test.html" rel="nofollow">http://seanmcb.com/typekit/webkit-antialiasing-test.html</a><p>Google has free webfonts that are already prepared for including in different browsers, you may consider them: <a href="http://www.google.com/webfonts" rel="nofollow">http://www.google.com/webfonts</a>, also there is <a href="http://www.kernest.com/" rel="nofollow">http://www.kernest.com/</a>.<p>FontSquirrel was already mentioned in this thread.
Why? Because the system strikes a balance between good semantics (for SEO if you need to justify this commercially), expressing a design effectively and licensing typography legally for the web.<p>It's an improvement over Cufon/Sifr generally and the one downside it does have (rendering under non-mac) will get better soon and I'll have to do zero work to benefit from that (theoretically).<p>Plus I saved a lot of time (and cost for the client) getting from design to live site quickly. It's a small price to pay, given that most ppl won't care that much, and those that do, a good proportion will understand what the issue is.
In my experience, some webfonts look okay at smaller sizes but most of them don't.<p>Typekit shows browser samples that you can break down by OS as well. ie. <a href="http://typekit.com/fonts/adelle-web" rel="nofollow">http://typekit.com/fonts/adelle-web</a> click on the 'Browser Samples' tab<p>Look what happens when you change the h1 on custora.com from 50px just up to 51px on Chrome [Win 7]: <a href="http://dl.dropbox.com/u/4129016/50-51.png" rel="nofollow">http://dl.dropbox.com/u/4129016/50-51.png</a> (it looks a lot better)
You've raised a good issue.<p>I recently redesigned my blog and that included updating the typography. I decided on DroidSerifRegular for the body text. It looks beautiful on a Mac but when I previewed it on IE/Windows, it looked absolutely horrible (the lowercase a, especially). So for IE I use Georgia.<p>My blog: <a href="http://techiferous.com" rel="nofollow">http://techiferous.com</a>
Custom fonts seems to have problems here and there on Chrome/Chromium. No matter how hard you try you would get mediocre fonts on Windows box.<p>May be chromium devs need a way to unitize ClearType when custom fonts are being used.
Chrome on Windows has some of the ugliest web fonts in general, but I've found that including an EOT, Woff and SVG in addition to the TTF.<p>FontSquirrel's '@font-face Kits' execute this as perfectly as I've seen, and I can't find a scenario wherein their fonts look ugly.