Pro Yearly is on sale from $80 to $50! »

Intro to Webfonts

3f7cda86b0d471afad79a0b5423d1677?s=47 Matt Wiebe
January 05, 2012

Intro to Webfonts

An introduction to the history of fonts on the web, and some considerations for working with webfonts today.

From a talk given on Jan 4, 2012 at the Winnipeg WordPress Meetup. The talk was (hopefully) more interesting than the slides. :)

3f7cda86b0d471afad79a0b5423d1677?s=128

Matt Wiebe

January 05, 2012
Tweet

Transcript

  1. WEBFONTS

  2. WEB FONTS

  3. 1996 ★ Microsoft gives CoreFonts to the web ★ Good:

    Verdana, Georgia ★ OK: Times New Roman, Arial, Trebuchet, Impact ★ Ugly: Comic Sans
  4. 1997 ★ Browser Wars. ★ IE: EOT ★ Netscape: TrueDoc

    ★ Nobody cares. Everybody just uses Arial.
  5. 1997-2007 ★ Crickets. ★ Embed type in images, use Core

    Fonts. ★ Foundries ostrich.
  6. 2004 ★ sIFR - a painful but useful attempt at

    using custom fonts.
  7. 2007 ★ Håkon Wium Lie writes "CSS @ Ten" for

    A List Apart.
  8. 2008 ★ Safari 3.1 allows native @font-face embedding of TTF/OTF

    font les.
  9. 2009 ★ Firefox 3.5 supports TTF/OTF @font-face embedding ★ People

    realize that IE still supports EOT. ★ FF + Safari + IE = most of the web.
  10. 2009 ★ Chrome 4 supports @font-face ★ Cufon debuts. Great

    hack, too late. ★ Foundries remove head from sand, help create WOFF ★ FF 3.6, Chrome 5, use WOFF
  11. 2009 ★ Typekit debuts ★ Font Squirrel generator debuts ★

    I launch thatwasnotok.com
  12. 2010 ★ Bunch of Typekit clones pop up ★ Foundries

    roll their own ★ Serious exploration of x-platform rendering issues
  13. 2011 ★ IE9 released (much better type rendering) ★ Safari

    5.1 nally has WOFF support ★ Typekit bought by Adobe
  14. 2011 @font-­‐face  {  font-­‐family:  'MyWebFont';  src:  url('webfont.eot');  /*  IE9  Compat

     Modes  */  src:  url('webfont.eot?#iefix')  format('embedded-­‐opentype'),  /*  IE6-­‐IE8  */            url('webfont.woff')  format('woff'),  /*  Modern  Browsers  */            url('webfont.ttf')    format('truetype'),  /*  Safari,  Android,  iOS  */            url('webfont.svg#svgFontName')  format('svg');  /*  Legacy  iOS  */ } /* http://www.fontspring.com/blog/further-­‐hardening-­‐of-­‐the-­‐bulletproof-­‐syntax */
  15. 2012 ?

  16. Type Rendering ★ Windows & Windows & Mac, oh my

  17. Type Rendering

  18. Mac OS X

  19. DirectWrite (Vista, Win 7)

  20. GDI ClearType (XP)

  21. GDI Standard (XP)

  22. No Antialiasing

  23. TrueType Hinting ★ Trying to make Windows suck less

  24. TrueType Hinting

  25. ttfautohint

  26. Performance ★ All browsers handle @font-face differently ★ WebFont Loader

    lets you smooth them out
  27. Best Practices ★ Always test font rendering in Win XP

    rst
  28. Best Bets ★ Typekit (esp. Adobe and FontFont) ★ WebType

    RE fonts ★ ttfautohint ★ Running fonts through Font Squirrel generator ★ Headlines are always safer
  29. Webfonts + WordPress ★ Best plugin I found for Google

    Web Fonts: http://wordpress.org/extend/plugins/ google-web-fonts-for-wordpress/ ★ WordPress.com has Typekit integration built in. ($30/year) ★ Custom is the best way to go if you can.
  30. FontFriend http://somadesign.ca/projects/fontfriend/

  31. Thanks! ★ http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/ ★ http://www.typotheque.com/articles/hinting ★ http://www.fontslive.com/info/typography/web-font-quality.aspx ★ http://www.lucasfonts.com/fonts/thesans/thesans-of ce/features/

    ★ http://cl.ly/9PBw ★ http://www.freetype.org/ttfautohint/ ★ https://github.com/typekit/webfontloader