Real Fonts on the Web

27 Apr 2011 Backstory

Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we've been working in the "web safe" range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs

Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses

• Free unlimited use
• Limited options
• Doesn’t $upport typographers
• Sources:
  • The League of Moveable Type
  • Google Webfonts
  • Font Squirrel

Middlemen Services

• They worry about the licensing
• Huge selection
• Simplifies the compatibility mess
• Fixed Fee or Subscription cost
• Services:
  • Typekit Free/Paid Subscription ($0-100/year) Provides a wide selection of fonts, including Adobe's library.
  • Fontspring One-time fee ($0-50 per font), unlimited use.
  • WebType Free Trial, Paid Subscription ($10-100/year)
  • Fonts.com Free or paid subscription ($10-100/year) Also provides a local copy for your mockups.
  • Font Deck Free trial, Pay per font, per year ($7.50 average)
  • For even more options, visit this great comparison by Sylvia Egger

How to use @font-face

This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS: @font-face { font-family: yourfontname; src: url(http://www.yourfontfile); } p { font-family: yourfontname, Helvetica, Arial, sans-serif; } @font-face is supported by these browsers (and newer versions):

• Internet Explorer 5
• Firefox 3.5
• Safari 3.1
• Chrome 4.0.249.4
• Opera 10.54 (Windows & Mac OS)
• iPad and iPhone iOS 3.1

@font-face file types vary by browser:

• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.

Services deliver the correct files for each browser, no mess. If you host your own, you'll need some help:

• http://www.fontsquirrel.com/fontface/generator
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
• http://ffffallback.com/

So, that all sound great, but what does it look like? Check out these fonts in action:

• http://typekit.com/about Typekit's own website showcases some great fonts
• http://www.onyourwayhere.com/
• http://lostworldsfairs.com/ A really fun demo of various fonts.
• http://www.kiva.org/
• http://weareelixir.com/
• http://carletondesign.com/ (This site uses typekit)
• http://forabeautifulweb.com/
• http://www.webfontsgallery.com/
• http://www.webfontawards.com/

Even more info:

• Zeldman.com: My Love Hate Affair with Typekit
• The Big Web Show: Web Fonts
• Font Face Tutorials
• Web Typography
• Web Font Services

So, what are you waiting for? Go explore the new world of real fonts on the web!