
Free Fonts for Web and Design - ComputerGuru
http://www.fontsquirrel.com/
======
faramarz
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.

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

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

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

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

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

~~~
faramarz
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>

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

~~~
Kilimanjaro
<http://code.google.com/webfonts>

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

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

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

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

~~~
ZeroGravitas
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...](http://www.fontsquirrel.com/foundry/The-League-of-Moveable-
Type)

and

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

------
percept
And:

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

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

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

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

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

