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 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