Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin. So here are a list of some of great web font tools you can use to select and test out some of the most popular web fonts. Try and experiment with different fonts. Play around. See what looks good paired with what other fonts. Now get out there and design some really awesome sites!

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

typecast

Typecast is a web app that is built to help us as designers use the browser to design our typography and websites. It gives you access to over 1000 web fonts that you can try out on your live website content in an actual browser.

tiff

A type diff tool that visually contrasts the differences between two fonts.

wordmark

Wordmark.it helps you choose fonts by previewing a word of your choice with the fonts installed on your computer.

typewonder

TypeWonder will display your site with the revised font so you can determine if the change is worth the effort. Then they provide you with the codes you will need for HTML and CSS. They also allow you some control over the style and characters, but it is rather basic. When you visit TypeWonder you simply type in your URL, then select one of the many fonts available and press go.

The Web Font Combinator

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

Awesome Fontstacks

Easily create bundles of beautifully matching, free web fonts, failsafe font stacks to back them up. Including ready-to-go CSS code!

Beautiful Web Type

There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Here are examples of these typefaces in action.

fontdragr

font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.