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

Fonts on the Web: Threat or Menace?

David Demaree
October 07, 2011

Fonts on the Web: Threat or Menace?

Four reasons to be scared out of your mind about making web fonts work. Presented as part of AIGA Chicago's "The New Web Typography" event on October 6th, 2011 at IIT's McCormick Tribune Campus Center.

David Demaree

October 07, 2011
Tweet

More Decks by David Demaree

Other Decks in Design

Transcript

  1. 4 REASONS TO BE SCARED OUT OF YOUR MIND (or,

    more likely, frustrated or mildly annoyed) Thursday, October 6, 11
  2. “Most fonts do not come with a license that allows

    you to share them. So, by uploading most fonts, regardless of their format, to a server, and linking to them, you are likely to be either breaching your license agreement with the vendor, or copyright laws, or both. And it’s not cool. John Allsopp October 2008 Thursday, October 6, 11
  3. v3.6 Late 2009 v6.0 Late 2009 v11.1 2010 v9.0* Feb

    2011 v5.1 July 2011 Browser makers have converged around WOFF Thursday, October 6, 11
  4. /* Standards-based web fonts */ @font-face { font-family: 'Franklin Gothic';

    font-weight: 400; font-style: regular; src: url('./fonts/FranklinGothic-n4.woff'); } Thursday, October 6, 11
  5. T HREE M A IN P RO B LEM S

    ? Thursday, October 6, 11
  6. /* "Bulletproof" @font-face */ @font-face { font-family: 'Franklin Gothic'; font-weight:

    400; font-style: regular; src: url('./fonts/FranklinGothic-n4.eot?#iefix') format('eot'), url('./fonts/FranklinGothic-n4.woff') format('woff'), url('./fonts/FranklinGothic-n4.ttf') format('truetype'), url('./fonts/FranklinGothic-n4.svg#svgFontName') format('svg'); } Thursday, October 6, 11
  7. @font-face { font-family: 'Franklin Gothic'; font-weight: 400; font-style: regular; src:

    url('./fonts/FranklinGothic-n4.eot?#iefix') format('eot'), url('./fonts/FranklinGothic-n4.woff') format('woff'), url('./fonts/FranklinGothic-n4.ttf') format('truetype'), url('./fonts/FranklinGothic-n4.svg#svgFontName') format('svg'); } @font-face { font-family: 'Franklin Gothic'; font-weight: 400; font-style: italic; src: url('./fonts/FranklinGothic-i4.eot?#iefix') format('eot'), url('./fonts/FranklinGothic-i4.woff') format('woff'), url('./fonts/FranklinGothic-i4.ttf') format('truetype'), url('./fonts/FranklinGothic-i4.svg#svgFontName') format('svg'); } @font-face { font-family: 'Franklin Gothic'; font-weight: 700; font-style: regular; src: url('./fonts/FranklinGothic-n7.eot?#iefix') format('eot'), url('./fonts/FranklinGothic-n7.woff') format('woff'), url('./fonts/FranklinGothic-n7.ttf') format('truetype'), url('./fonts/FranklinGothic-n7.svg#svgFontName') format('svg'); } @font-face { font-family: 'Franklin Gothic'; font-weight: 700; font-style: italic; src: url('./fonts/FranklinGothic-i7.eot?#iefix') format('eot'), url('./fonts/FranklinGothic-i7.woff') format('woff'), url('./fonts/FranklinGothic-i7.ttf') format('truetype'), url('./fonts/FranklinGothic-i7.svg#svgFontName') format('svg'); } Thursday, October 6, 11
  8. EOT TTF WOFF SVG Internet Explorer 4.0 ✔ Internet Explorer

    9.0 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Opera 10.0 ✔ Opera 11.1 ✔ ✔ Firefox 3.1 ✔ Firefox 3.6 ✔ ✔ Chrome 1.0 ✔ ✔ Chrome 6.0 ✔ ✔ ✔ Mobile Safari / iOS 3.2 ✔ Mobile Safari / iOS 4.2 ✔ ✔ Mobile Safari / iOS 5.0 ✔ ✔ ✔ Thursday, October 6, 11
  9. /* Standard @font-face, for modern browsers */ @font-face { font-family:

    'Franklin Gothic'; font-weight: 400; font-style: regular; src: url('./fonts/FranklinGothic-n4.woff') format('woff'), url('./fonts/FranklinGothic-n4.ttf') format('truetype'); } /* Variation-specific @font-face CSS, for archaic ones */ @font-face { font-family: 'FranklinGothic-Regular-400'; font-weight: 400; font-style: regular; src: url('./fonts/FranklinGothic-n4.eot'); } IE 6-8 can only “see” four variations in a single family Thursday, October 6, 11
  10. .example h1 { font-family: 'FranklinGothic-Regular-400', 'Franklin Gothic'; font-weight: 400; font-style:

    regular; font-size: 48px; line-height: 48px; } Thursday, October 6, 11
  11. Fonts as a service <script type="text/javascript" src="http://use.typekit.com/agz0gmz.js"></script> <script type="text/javascript"> try{

    Typekit.load(); }catch(e){} </script> CSS wrapped with JavaScript (Typekit or WebFontLoader) <link rel="stylesheet" href="http://fontdeck.com/s/css/wMErktaKFxpwhaGE/example.com/87.css" type="text/css" /> CSS-only (Fontdeck, Webtype, Google) Thursday, October 6, 11