Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Webfonts

Avatar for Matt Wiebe 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. :)

Avatar for Matt Wiebe

Matt Wiebe

January 05, 2012
Tweet

More Decks by Matt Wiebe

Other Decks in Design

Transcript

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

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

    ★ Nobody cares. Everybody just uses Arial.
  3. 2009 ★ Firefox 3.5 supports TTF/OTF @font-face embedding ★ People

    realize that IE still supports EOT. ★ FF + Safari + IE = most of the web.
  4. 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
  5. 2010 ★ Bunch of Typekit clones pop up ★ Foundries

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

    5.1 nally has WOFF support ★ Typekit bought by Adobe
  7. 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 */
  8. Best Bets ★ Typekit (esp. Adobe and FontFont) ★ WebType

    RE fonts ★ ttfautohint ★ Running fonts through Font Squirrel generator ★ Headlines are always safer
  9. 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.