FontFont

FontFont claims that they are the “world’s largest library of original, contemporary typefaces” – and it’s tough to dispute, given the volume of quality typefaces they have available for purchase. Everything is here, from clean sans-serifs to crazy display fonts.

Popular: FF DIN
New: FF Spinoza

Hoefler & Frere Jones

Responsible for some of the most beautiful typefaces around – like Gotham, which is used by absolutely everyone ever on earth, including us – H&FJ has a smaller library of families available for purchase. It’s not the quantity though; it’s the quality.

Popular: Gotham
New: Ideal Sans

Hit the jump for the whole article!

FontSpring

FontSpring has a great collection of typefaces available, and they can be purchased per-weight (as opposed to full-families only). This makes FontSpring a great choice for designers on a budget, or if you’re shopping around for that perfect typeface for an identity design client. Plus, they have very reasonable @font-face licenses.

Popular: Proxima Nova
New: Gibson

MyFonts

MyFonts has a huge collection of fonts available for purchase – serif, sans-serif, display, blackletter, you name it. And not only can you purchase fonts, they also have some fonts available for free as well as a great font identifying tool, WhatTheFont.

Popular: Brandon Grotesque
New: Georgie

Veer

Veer has over 12,000 fonts available that start at $10. There are some beauties in their collection; however, their site interface makes finding the font you’re after, or popular fonts, a little more difficult than it has to be. If you take your time, though, you will be rewarded.

Popular: Strangelove
New: Memoriam Pro

House Industries

House Industries is probably best known for their Neutraface family, but that’s not all they have to offer. Check out some of their fun display fonts and hand-drawn fonts. Their interface is great for quickly seeing how a font family could be used, too.

Popular: Neutraface
New: Not sure, but Burbank is sweet.

Which of these font websites do you frequent? Which font websites did I leave out that are a staple for you? Let me know in the comments!

Cabin

This well made sans-serif typeface has 8 weights for download.

Bevan

A bold, heavy slab-serif.

Pacifico

A playful script font.

Quattrocentro Roman

A classy serif font, similar to Trajan in some regards.

Oswald

A heavier, almost utilitarian sans-serif.

Steelfish

A bold sans-serif that would be great for headlines.

Maven Pro

A semi-casual sans-serif.

Dancing Script OT

A classic handwriting-style script font.

Springsteel Serif

4 weights of this slab-serif typeface are available for download. Gorgeous.

Amaranth

A laid-back sans-serif with some personality.

As always, make sure to use your newfound web font powers for good, not evil. Enjoy!

Allow me to run down the current choices for designers & developers when it comes to live fonts on the web. Some of these are free; some are paid; some are easier to implement than others. It’s up to you to make the choice as to which tool is best for you and your project, but I’ll share my opinions throughout. If I missed any that you use on the regular, let me know in the comments! *note: each title and image links to the service’s website.

@font-face

free

This CSS3 selector is probably the most widely-used tool for font-embedding today. It’s super easy to implement, and you can use any open-source font whose license allows for font-embedding.

Essentially, you upload the font to your server and link to it within your CSS file. For what it’s worth, I almost exclusively use FontSquirrel’s @font-face tools, which include kits and generators. If you’re overwhelmed by the amount of choice when it comes to @font-face fonts, check out the 10 Best @font-face Fonts.

Google Font API

free

This service from Google is even easier than @font-face to implement, although their list of available fonts isn’t so big (yet). It’s a similar idea to @font-face, but you don’t have to host the font on your server. You just throw in one line of code in your HTML and define the font in your CSS. That’s it.

Hit the jump for more ways to better your web typography!

Cufon

free

Cufon takes fonts and converts them to a proprietary format, then renders them using Javascript. They require you to download the core JS file, use their font generator, and link to the .js files; check out this article for a complete how-to on using Cufon. Keep in mind, like @font-face and most of these other services, you can only use fonts that are licensed for such a use.

sIFR

free

sIFR – Scalable Inman Flash Replacement – is an engine that places Flash “movies” overtop of the fonts you want replaced. So, say you have your <h1> set in Arial; you can use sIFR to find <h1> tags and put a Flash movie, in your chosen font, overtop of the text file. I’m oversimplifying, of course, but that’s the gist of it. It’s a powerful tool, but there are two downsides to take note of: it’s Flash powered, so it won’t work on iPhones, iPod Touches, or iPads thanks to Jobs’ hatred for Flash. Two, it’s supposedly pretty tricky and not overly user friendly to set up and get working. I’ve never used it, so I can’t vouch for that, but I’ve read a lot of articles that all say the same thing. However, the good news is that it degrades gracefully; if the user is on an iPhone, or doesn’t have Flash installed, it will just show the original <h1> styling.

Kernest

free

Kernest is yet another service that uses @font-face, but they simplify the process a little bit. You choose a font, they give you a link, you add the link to your site & the font name to your stylesheet. Their site is a drop-dead simple interface for those who don’t want to wrestle with the intricacies of @font-face; however, FontSquirrel‘s kits and generator are super simple too. Choice is yours.

Font Burner

free

Font Burner is a service that uses sIFR to replace fonts on your site. Find a font through their site (over 1000 to choose from), paste their code in, and voila! sexy fonts on your website. Font Burner purportedly takes the hassle and trickery out of using sIFR. Same issue as with sIFR though; it’s a Flash replacement for your text, so your fonts won’t show up on iPhones, iPod Touches, or iPads.

TypeKit

ranging from free to $100/year

Typekit works very similarly to Google’s Font API – link in the HTML, tell TypeKit what fonts you want to use. However, they have over 500 fonts designed specifically for the web – both commercial and open-source. So while it’s not really free for any working web designer, the quality of their fonts sets TypeKit apart.

Typotheque Web Fonts

ranging from free to a percentage of a type’s license cost

Typotheque is another foundry offering custom fonts from their library using the @font-face CSS declaration. Just as simple as everything simliar to get up and running. I’ve never used, but at a quick glance I’m pretty sure I’d go with TypeKit if I’m going to be paying. Why? Typotheque’s fonts, while well-designed, aren’t all designed for the web, and their selection is much smaller than TypeKit’s.

Fontdeck

not free; no pricing info

Fontdeck uses @font-face, but has a specific & unique collection of fonts available for license. They provide the code for you; you paste it into your CSS & HTML. This service offers high-quality fonts designed for the web (after all, not every font works on screen; some are only for print, and vice versa). There isn’t any pricing info on their site right now, but the “Try FontDeck For Free” tagline leads me to believe they’ll be charging.

Fonts.Com Web Fonts

not free; no pricing info

Still in beta, the Fonts.Com font-embedding service – imaginatively titled “Web Fonts” – looks to be a pretty solid choice once it gets up and running. You can sign up for a beta account at this point, but it’s not guaranteed you’ll get in. Anyway, according to their website, all you have to do to use their service is 1) Create a project, 2) Choose & assign fonts, and 3) Add a short script to your site.

Again, similar but different to @font-face, Google Font API and the like. The fact that fonts.com has a huge font library is both a pro & a con – people will inevitably make bad choices, so don’t be one of them.

There you have it; virtually all of your options for improving typography on your website designs, without resorting to images. Me? I think I’ll stick to @font-face, but I might give TypeKit and Fonts.Com’s Web Fonts a go for a project or two. Let me know your experiences and preferences in the comments!

However, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it. The obvious examples are there – don’t use display fonts as your body text, for example – but some fonts just aren’t great for the web (or great at all… or good… or passable).

So I’ve come to save the day with my opinions. Here’s the 10 Best @font-face Fonts, broken into Display (aka Heading 1, Heading 2 etc) and Body listings.

DISPLAY

Use these guys for your H1, H2 etc tags – but if you set your body text in them, I’ll come right through the internet and beat you up.

Museo & Museo Slab

The Museo family has exploded in popularity, and with good reason – it’s a well-designed typeface all around, unique & usable with character. Museo & Museo Slab are great options for headings on your site using the @font-face declaration.

Hit the jump for the rest of the 10 Best @font-face Fonts!

Chunk

Chunk is one hell of a slab serif. Bold & confident, set this guy at larger sizes to maximize potential.

Andron

You can use Andron for body text, but because there is only one weight that is open-source and with a license that allows embedding, don’t use it for body text. Use it for sophisticated headers – a break from Georgia, but not too big of a break.

Contra

With the same name as the greatest video game of all time, how can you NOT use this modern serif on your site? Clean & sharp, with a good balance of sophistication and modern stylings.

League Gothic

A condensed serif display font, I fell in love when I discovered League Gothic (I mentioned it, and Chunk, in my article 10 Free & Amazing Display Fonts). Balanced & structured, this font is gainly popularity quickly with good reason.

BODY

These guys can definitely work as display fonts too, but they really shine when used in the body of your website. Legibility, good design, and a variety of weights & styles are the reason these fonts were chosen. If you set up a site for a client and use a font that only has one weight for their body font, you’re going to be getting a phone call when “bold isn’t working”. The following fonts won’t give you that issue, and they’re all well-designed and provide a nice break from the standard web-safe fonts.

Droid Serif

Masculine & classy, Droid Serif is a great choice. Lots of styles available, great legibility and styling.

Deja Vu Sans

The Paper Leaf site is set in Deja Vu. A bit more condensed than some of the others here, it has some unique qualities and lots of styles.

Cartogothic

Another sans-serif choice when you want a basic, well-designed font for your body text – but don’t want to use Arial.

Fontin Sans

Fontin Sans is a sans-serif that has its own style – you can pick it out a mile away. A great choice for people who want something different but still legible and usable.

Eau

The Eau family isn’t a ground-breaking typeface, but they provide you with a wealth of styles to choose from. Because of this, it’s great choice if you’re building a website for a client who will be writing a lot.

There you go! The 10 Best @font-face Fonts (in my not-so-humble opinion). If you’re unsure of how to use the @font-face declaration, check out my article the Top Web Design Bookmarks of 2009. There’s an article in there that’s very useful. As well, check out FontSquirrel’s @font-face Generator – super easy to use, and very helpful. The @font-face declaration can be a little tricky, thanks to things like IE’s proprietary font type, and their generator provides you with all various font types (OTF, SVG, OET, etc) to get your font working in all modern browsers.

Thanks for reading!

Some are sketchy; some are based off of well-known fonts; all are great. Check out this list of 10 Awesome Free Hand-Drawn Fonts! If you like it, don’t forget to check out our list of the 10 Free & Amazing Display Fonts too.

SKETCH BLOCK

It looks like Rockwell, but sketchy! Great for display.

JONNY QUEST CLASSIC

This typeface has a nice mix of classy & old-timey elements. Legible & visually interesting.

TKACHENKO SKETCH

Slightly grungy, but not so angry and unreadable like a lot of grunge fonts.

Hit the jump for more free hand-drawn fonts!

UGLY QUA

A gorgeous, hand-drawn serif typeface.

ARSENALE WHITE

Playfully off-kilter, this font is great for designs aimed at younger children.

FFF TUSJ

This strong typeface has a hint of blueprint styling to it. Dig it!

DJ GROSS

Half graffiti, half grunge, all terrible name. But don’t let that deter you – this font is killer.

CLEMENTINE SKETCH

A smooth, flowing outlined font. Like Arsenale White, it’d be great for children-focused designs.

HANDVETICA

Where would any font list be without at least an indirect reference to the most popular font ever? Here’s a hand-styled version of Helvetica.

ELLIOT SIX

Scrawly kid-writing that will help make any design fun & unique.

Thanks for reading – please share this article!