The Best of FontFonts on the Web, Part 1

  • Fonts in Use
Fonts in Use | Stephen Coles | February 18, 2010

Exactly three months have passed since we launched FontFonts on Typekit, the first service to offer reliable and secure delivery of non-system fonts for use on web pages. In those 90 days, hundreds of users have integrated FontFonts in their sites. Looking at the ways designers are using these fonts gives new hope for typography online. I gathered some of my favorites from the thousands of blogs, portfolios, and corporate sites currently using FontFonts via Typekit. The promise of professional alternatives to the same old web fonts is really starting to take shape, and there’s no better proof than the examples below.

Designer Portfolios

frankchimero.com
frankchimerocom2
FF Tisa for Frank Chimero

benbodien.info
FF Enzo for Ben Bodien

liftux.com
liftuxcom2
FF Dagny for Lift

designintellection.com
designintellection.com
designintellection.com
FF Meta Serif with TypeTogether’s Adelle for Design Intellection

interactivethings.com
FF Netto with Suitcase’s Temier for Interactive Things

michaelddavis.com
FF Dagny with Porchez Typofonderie’s Le Monde for Mike Davis

markboultondesign.com
markboultondesign.com
FF Tisa with Mark Simonson’s Proxima Nova for Mark Boulton Design

Corporations & Organizations

dsvc.org
dsvc.org
FF Meta and FF Meta Serif for the Dallas Society of Visual Communications

rochesalon.com
FF Enzo for Roche Salon

Blogs & Personal Sites

samhowat.com
FF Enzo and FF Tisa for Sam Howat

behoff.com
FF Dax for Brian Hoff

fredssoldater.se
FF Providence Sans for Daniel Jansson, a Swedish blogger who is part of the peacekeeping force in Afghanistan

simplebits.com
FF Meta Serif and a Baskerville ampersand for Dan Cederholm’s SimpleBits

adamwiggall.com
FF Netto for Adam Wiggall

blog.florianschroiff.com
FF Prater Script for Brimborium (Florian Schroiff)

typographica.org
typographica.org
FF Dagny for Typographica.org

webworkerdaily.com
FF Meta for WebWorkerDaily

agenturblog.de
FF Dax for agenturblog.de

john.jubjubs.net
john.jubjubs.net
FF Dax [Web] for Mozilla CEO John Lilly

Communities

css-tricks.com
css-tricks.com
FF Tisa for CSS-Tricks

chris-wallace.com
chris-wallace.com
FF Dax for WordPress Themes (Chris Wallace)

alldevjobs.comFF Meta Serif for AllDevJobs.com

letsmerge.us
FF Tisa for Merge

This is just the beginning. Now that Typekit has provided hooks for WordPress and TypePad platforms it is easier than ever to use the service. Seen other nice examples of FontFonts on the web? We welcome your own additions to this gallery in the comments below.

Update: Feb 23, 2010 — The stand-alone WOFF option promised back in November is now a reality. FontShop just released Web FontFonts.

Tags: , , , ,

15 Comments:

  1. I’m working on a redesign/rebranding for my personal site and blog that uses FF Meta (through Typekit), but I’m not quite ready to show it off yet (should be live within the next month or so, when I’ll comment again if I can remember).

    Posted by Ian O'Dea on Feb. 18, 2010
  2. FF Meta Serif and Sans

    Posted by Scott on Feb. 18, 2010
  3. The application of FF Prater on Brimborium is really charming. It’s nice to see a such a quirky face used in a tasteful and appropriate manner.

    Posted by Chris on Feb. 18, 2010
  4. I just finished a redesign of my site that uses FF Enzo and FF Tisa. I’m really happy with how it turned out.

    Click on my name to see the site.

    Posted by Matt Jacobs on Feb. 18, 2010
  5. At the Nursing station uses website uses FF Tisa
    http://atthenursingstation.com/

    Posted by pab on Feb. 19, 2010
  6. These are some really great uses. I would say that my favorite for now is FF Tisa.

    Posted by TJ on Feb. 19, 2010
  7. Did I see a shadow of Dwiggins in Lift UX’s website? :)

    Posted by Bram Pitoyo on Feb. 19, 2010
  8. I confess, that was my contribution to their contact form.

    Posted by Stephen Coles on Feb. 20, 2010
  9. I read about Typekit last November, but not being very CSS-skilled I (wrongly) supposed that the implementation was somehow quirky.

    After reading this post I decided to sign up to Typekit and give it a try, and in just ten minutes I completely replaced the bland Arial I used in my blog with Museo Sans by Jos Buivenga.

    I cannot imagine the potential of full typography available for Web design, especially in such an easy-to-use and legitimate way.

    Posted by Em on Feb. 21, 2010
  10. Oooops! I just checked on Windows platform, any major browser, and the small size is not rendered smooth at all (for sure it’s Windows’ fault!).

    It’s hard to decide whether to remove the font, or create alternative CSS for Windows…

    Posted by Em on Feb. 22, 2010
  11. German web designer Gerrit van Aaken uses FF Dax (for Mac users).
    Type designer Nina Stoessinger uses FF Tisa.
    webfonts.info uses FF Tisa.

    Posted by Christoph on Feb. 22, 2010
  12. Nice! But before your enthusiasm gets the better of you, try taking a gander at these on Windows (you know, that operating system used by 90% of the world)… they work, but they’re considerably less nice. Some look quite horrid. Better for display type than text sizes, but more importantly, check the font you want to use on both platforms, some render better than others. Typekit shows you cross-platform samples, so make sure you know what your type is actually going to look like (if your audience is primarily Mac-using designers, perhaps less of an issue than if your audience is more general).
     
    At any rate, it’s a wake-up call: @font-face is still not ready for general use if it’s poorly supported by the operating system virtually everyone uses.

    Posted by Paul Ferguson on Apr. 20, 2010
  13. Great point, Paul. We recommend that users check the output on Windows browsers. You’ll find that FontFonts render significantly better than some “webfonts” because they were painstakingly hinted by FSI engineers for better display on non-Mac systems.

    Posted by Stephen Coles on Apr. 21, 2010
  14. Most of these sites look absolutely awful in Firefox for Windows.

    Posted by miles on May. 21, 2010
  15. Same comment as above. I think we as designers like to impress only ourselves but if any of these sites are viewed by rest of the public (usually IE8 or 7) these sites/fonts render like poop. Why would you risk a client seeing such a site?

    Posted by Milosz on Apr. 16, 2011

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS