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. :)

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