Fonts on the Web: Threat or Menace?

Transcript

1. FONTS ON THE WEB:
   THREAT
   or
   MENACE?
   Thursday, October 6, 11
   

   View Slide

2. 4 REASONS TO BE
   SCARED OUT OF
   YOUR MIND
   (or, more likely, frustrated or mildly annoyed)
   Thursday, October 6, 11
   

   View Slide

3. LICENSING!
   Thursday, October 6, 11
   

   View Slide

4. http://bit.ly/USYMX
   Thursday, October 6, 11
   

   View Slide

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
   

   View Slide

6. August 24, 2011
   Thursday, October 6, 11
   

   View Slide

7. LEGACY
   FORMATS!
   Thursday, October 6, 11
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. BUT!
    Thursday, October 6, 11
    

    View Slide

11. T HREE M A IN P RO B LEM S
    ?
    Thursday, October 6, 11
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. INTERNET
    EXPLORER!
    Thursday, October 6, 11
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. DOCUMENT MODES!
    or: When is IE9 not really IE9
    Thursday, October 6, 11
    

    View Slide

19. FOUT!
    Thursday, October 6, 11
    

    View Slide

20. Thursday, October 6, 11
    

    View Slide

21. WHO WILL
    SAVE US?
    Thursday, October 6, 11
    

    View Slide

22. Fonts as a service
    src="http://use.typekit.com/agz0gmz.js">
    <br/>try{ Typekit.load(); }catch(e){}<br/>
    CSS wrapped with JavaScript (Typekit or WebFontLoader)
    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
    

    View Slide