Ultimate Web Font Resource Roundup: 50 Awesome Sites
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!
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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.