Err: Connection timed out [110] James Carleton » 2011 » April - My work and the rest of the design world

Archive for April, 2011

Real Fonts on the Web

Posted in Design, Learning, Typography, Websites on April 27th, 2011 by James – Be the first to comment

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

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:

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

Even more info:

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