25 Completely Free Fonts Perfect for @fontface

Awesome collections. Thanks

thanks for this post – would like to see a review some good international fonts for utf8 based sites. Which ones cover japanese, hindi and still look great?

Great article, superb fonts. Thanks for sharing!

Thanks for this! Now our Creative Director will be out of commission for a few hours!

Really liking the Code and Raleway fonts. I’ve only used @font-face once so I think I’ll check out Font Squirrel to see what they can offer.

If CODE was a girl, she’d be pregnant with my baby.

Very beautiful fonts.
Thanks for rounding them all up in one place.

Bookmarked!!

Too bad several of the fonts are only A-Z.
International web sites do need special characters and there are less options.

Great addition to my staid collection… thanks!

Font squirrel is the best. But use with caution. font-face causes your text to ‘blink’, looks different on different browsers and should probably be avoided for body text

I’m not too sure about the licenses for all the fonts but I could not find the @font-face licensing for ‘ripe’ and ‘kilogram’. I do believe that a commercial license does not automatically allow @font-face embedding. The license needs to be stated explicitly.

I’m liking Nevis a lot!

Nice collection.. Excelent !

Thanks, exactly what i looking for!

Thank you very much. Yeah !!!!!!!!!!!! many fonts.

Yeah, Free fonts FTW!

Thanks for these :)

@fontface works well – provided you use it correctly..

Firstly – that “blink”, is apparently known as “fout” and can be sorted with a line of javascript – I found the answer here:

http://paulirish.com/2009/fighting-the-font-face-fout/

As for the number/type of characters in a font – font squirrel allows you to decide what of the available characters you want included in your pack and does allow yuo to preview all available characters.

There is a “shortcut” – for specifying all weights of a font, which involves “tweaking” the provided css. Every weight carries it’s own name.. shorten the name, so all weights have the same name.. e.g. Avenir
Then be sure to specify the correct font style and weight in the font css – this is important to have a “real” bold/italic and not a browser “faux” bold/italic. When you then add your font to your font family, you have access to all weights and not faux weights.

Hope that helps.