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.

Transcript

1. FONTS ON THE WEB: THREAT or MENACE? Thursday, October 6, 11
2. 4 REASONS TO BE SCARED OUT OF YOUR MIND (or, more likely, frustrated or mildly annoyed) Thursday, October 6, 11
3. LICENSING! Thursday, October 6, 11
4. http://bit.ly/USYMX Thursday, October 6, 11
5. “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
6. August 24, 2011 Thursday, October 6, 11
7. LEGACY FORMATS! Thursday, October 6, 11
8. 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
9. /* 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
10. BUT! Thursday, October 6, 11
11. T HREE M A IN P RO B LEM S ? Thursday, October 6, 11
12. /* "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
13. @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
14. 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
15. INTERNET EXPLORER! Thursday, October 6, 11
16. /* 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
17. .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
18. DOCUMENT MODES! or: When is IE9 not really IE9 Thursday, October 6, 11
19. FOUT! Thursday, October 6, 11
20. Thursday, October 6, 11
21. WHO WILL SAVE US? Thursday, October 6, 11
22. 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