Design Theatre: Ultimate Web Font Resource Roundup: 50 Awesome Sites

Ultimate Web Font Resource Roundup: 50 Awesome Sites

Written by Joshua Johnson, On 21st October 2010.
Filed in Typography.

The idea that web designers ignore typography is officially dead. In recent years countless tools and services have sprung up to meet the need of making the web a more type-friendly place, and they’re succeeding.

Today we bring you a huge list of awesome websites for all things related to web fonts. You’ll find sites offering free fonts, web font services, font building tools, previewing utilities, and a lot more!

Free Fonts

The League of Moveable Type

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

dafont.com

Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.

Font Squirrel

Handpicked free fonts for graphic designers with commercial-use licenses. Also check their @font-face kits for effortless font embedding!

1001 Free Fonts

1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh. License fonts for commercial use.

Urban Fonts

See our amazing collection of free fonts and free dingbats.

FontSpace

Download 13990 free truetype and opentype fonts for Windows and Mac.

TypeNow.net Themed Fonts Download Free Movie and Music Fonts

The Web’s BIGGEST Typography Resource. Over 6000 free fonts for you to download.

exljbris Font Foundry

Welcome to Jos Buivenga’s exljbris Font Foundry. Here you can find my [free] fonts: Delicious, Fontin, Fontin Sans, Tallys, Fertigo Pro, Diavlo, Anivers, Museo, Museo Sans, Museo Slab, Calluna & Geotica.

Search Free Fonts

Search Free Fonts has largest Free Fonts selection on the web. Over 13000 free fonts for Windows and Mac available to download.

Creamundo

The free fonts site.

Fawnt

Fawnt is a font resource for designers, developers, and anyone that appreciates the web’s highest quality fonts.

Fonts 500

The web’s top 500 free fonts, calculated based on download counts from some of the biggest free font archives.

Web Font Solutions

cufón – fonts for the people

Fast text replacement with canvas and VML – no Flash or images required.

Typekit

Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

Google Font Directory

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Fonts.com Web Fonts

Add great looking fonts to your website in a few easy steps.

Fontdeck webfonts: Real fonts for your website

Fontdeck is the professional webfonts solution. You only pay for the fonts you need, when you need them. Get up and running in under 60 seconds.

Kernest

Web Fonts. Delivered. Your browser doesn’t support @font-face, so Kernest probably won’t look very interesting.

Typotheque

The Typotheque Webfont Service enables you to use custom fonts in your website using the @font-face rule in CSS. Just add a line of code to your page and get it working in minutes. Simple, fast and standards-compliant.

Fonts Live

Expertly crafted, premium quality web fonts for designers and web developers. FontsLive delivers real fonts for CSS @font-face.

Fontspring

99.9% of our fonts can be purchased with @font-face licenses. Get the fonts you want on your site.

WebINK Web Fonts

WebINK is where you’ll find high-quality fonts for your websites. Easily use professional type from trusted foundries in the sites you design. And we deliver them for you—quick as a WINK.

Webtype

Webtype provides fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading.

Font Creation

FontStruct | Build, Share, Download Fonts

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Font Generator – Make Your Own Handwriting Font

YourFonts.com is an online font generator that allows you to create your own OpenType fonts within a couple of minutes. Go make your own handwriting as a font!

Fontifier – Your own handwriting on your computer!

Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

FontEditor BitfontMaker

Build custom fonts online (a bit like a scaled-down version of FontStruct).

Font Identification

WhatTheFont!

Submit an image to WhatTheFont to find the closest matches in our database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum.

What Font is

Using What Font is you can identify the font you are looking for!

Identifont – Fonts by Appearance

Identify a font by answering a series of simple questions about its appearance.

TypeNavigator

An interactive, visual font search system. This system is unique in that you can identify fonts by memory alone.

Preview and Manage Fonts

Typetester – Compare fonts for the screen

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

flipping typical

flipping typical. check out how different words look in all the popular fonts on your computer.

Typechart – Browse Web Type, Grab CSS.

Typechart lets you flip through, preview and compare web typography while retrieving the css.

STC :: fontBROWSER ::

See previews for the fonts installed on your machine.

Font Viewer – myFontbook.com

myFontbook is a nifty new tool for viewing your font collection from your web browser. The font viewer allows you to easily review and catalog all of your installed fonts. Runs in your browser. Nothing to install.

Font Preview – Google Font Directory

Lets you choose a font from the Google Font directory with a few text styling options, and preview them.

CSS Font and Text Style Wizard

Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Typograph – Scale & Rhythm

This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Web Font Specimen

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Debuted in a special issue of A List Apart, Web Font Specimen is now in its second iteration.

Conversion and Calculation

Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

PXtoEM.com

PX to EM conversion: Daunting, but not quite lions, tigers, and bears thanks to PXtoEM.com

Online Font Converter

The Online Font Converter converts fonts to/from: .dfont .eot .otf .pfb .tfm .pfm .suit .svg .ttf .pfa .bin .pt3 .ps .t42 .cff .afm .ttc .woff & .pd.

Misc

CopyPasteCharacter.com

Easily copy and paste special characters either directly or as HTML.

Typedia: A Shared Encyclopedia of Typefaces

Typedia is a resource to classify, categorize, and connect typefaces.

FontFonter

Try Web FontFonts on any website.

Awesome Fontstacks

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

Bulletproof @font-face syntax « Paul Irish

The most widely accepted cross-browser syntax for using @font-face to embed custom fonts on the web.

The Essential Guide to @font-face

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

What Did We Miss?

The sites above should be enough to get you well on your way to web type bliss, but this merely scratches the surface of what’s available. Leave a comment below and tell us what awesome sites you use for implementing beautiful web typography.