Free Fonts for Web and Design | Hacker News Reader

Free Fonts for Web and Design

fontsquirrel.com

139 pointsComputerGuru24 comments

Just a quick tip while we're on subject.

If you use any exotic type for your @font-face, be sure to give it a text-shadow: 0px 0px 1px #fff; to smooth out the edges.

The shadow colour should be the same as the background colour. So technically, it's just a smoother, not a shadow.

The result is the same smooth render you would get with sIFR. Works wonders.

I've noticed this myself. Any idea why that happens?

I've noticed that sometimes adding a blurred shadow disables sub-pixel anti-aliasing, and sometimes that makes things look better. I think, though, that there's a separate effect that makes the font look thinner when a blurred shadow is added that I don't really understand.

Nice tip - but the @font-face generator on the linked site actually does font smoothing before generating the output.

I just tried it. It's not the same, they're using Hinting to render better, but it's definitely not smooth.

my comparison http://img709.imageshack.us/img709/9537/textshadow.png

It's even worst at smaller font-size. My test font is relatively simple also, imagine the disaster the NYT font would be without a blank shadow.

What browser is that in, and do you have anti-aliasing enabled in your OS? The 'original' text in your screenshot isn't anti-aliased at all, which I don't think should happen unless you have AA off on a system level.

You know what, it just dawned on me that at one point I had my IE7 ClearType disabled because I didn't like it's smoothing effect. I don't know if that setting is carried on to Chrome or not.

I'm on XP + Chrome.

AFAIK, ClearType settings apply system-wide. It should be pretty easy to tell though; if any non-image text in your browser is smoothed, it's on. If it's not, it's off.

What it sounds like the white drop shadow did in your case was simply force ClearType on for that text.

Thanks dude. I had initally turned off ClearType because smaller texts were too blurry or you could see a hint of red in some letters.

Found a tool that optimizes the contrast http://www.microsoft.com/typography/ClearTypePowerToy.mspx

The difference is striking. This is a great tip, thank you for sharing.

Google should host and cache some nice free fonts for everybody to use in their sites, so we can give the web a face lift.

http://code.google.com/webfonts

Nice call Kilimanjaro

Their font face generator tool is an incredibly useful one: http://www.fontsquirrel.com/fontface/generator

Additionally, if you're looking for higher quality fonts, the same guy (Ethan) who runs the squirrel runs a boutique for @font-face fonts: http://fontspring.com

Yep. They've got great fonts - but a friendly note: they're not free. Well worth the money, though... and very sensibly priced.

Thanks for the plug Paul.

http://www.theleagueofmoveabletype.com/ is another place that has a bunch of good open-licensed and free-to-use fonts.

Those are included here (as you would expect with an open licence product but which is a new thing for fonts):

http://www.fontsquirrel.com/foundry/The-League-of-Moveable-T...

and

http://www.fontsquirrel.com/foundry/Barry-Schwartz

I came across this site a while ago and have been trying to find it again for the past couple days. Thanks for the link!

And:

http://www.josbuivenga.demon.nl/index.html

Suggested feature for a @font-face site: include a sample of the font using @font-face for browsers that support it, instead of just images (at least I didn't see any live samples).

They are there, just well hidden.

http://www.fontsquirrel.com/fontfacedemo/GoodDog

Click View to get the individual font page, then @font-face Kit in the menu bar at the top, then the demo of this font here link.

Great resource, though I've personally found cufon to be easier to deal with across browsers.

Great batch. A couple I hadn't seen yet.

Reply on news.ycombinator.com