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. FONTS ON THE WEB:
    THREAT
    or
    MENACE?
    Thursday, October 6, 11

    View full-size slide

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

    View full-size slide

  3. LICENSING!
    Thursday, October 6, 11

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  7. LEGACY
    FORMATS!
    Thursday, October 6, 11

    View full-size 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 full-size 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 full-size slide

  10. BUT!
    Thursday, October 6, 11

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  15. INTERNET
    EXPLORER!
    Thursday, October 6, 11

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  19. FOUT!
    Thursday, October 6, 11

    View full-size slide

  20. Thursday, October 6, 11

    View full-size slide

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

    View full-size 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 full-size slide