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

Web Fonts as a Progressive Enhancement, Ampersand 2013

Web Fonts as a Progressive Enhancement, Ampersand 2013

Web fonts are great. Even better is to not fuck up your website with web fonts.

Andy Hume

June 28, 2013
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. AS
    PROGRESSIVE
    ENHANCEMENT
    @andyhume
    Ampersand, 2013
    WEB FONTS
    Sunday, December 29, 13

    View Slide

  2. What’s this?
    Sunday, December 29, 13

    View Slide

  3. This is...
    an outage
    Sunday, December 29, 13

    View Slide

  4. This is...
    downtime
    Sunday, December 29, 13

    View Slide

  5. This is...
    lost page views
    Sunday, December 29, 13

    View Slide

  6. This is...
    lost revenue
    Sunday, December 29, 13

    View Slide

  7. Thank-you!
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    http://lanyrd.com/sckmwb
    @andyhume
    Sunday, December 29, 13

    View Slide

  8. Meaning is the baseline. Design is an
    enhancement.
    Paul Lloyd
    https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web
    Sunday, December 29, 13

    View Slide

  9. Meaning is the baseline
    Sunday, December 29, 13

    View Slide

  10. http://www.flickr.com/photos/the_jorr/325224175/
    Unreliable
    Sunday, December 29, 13

    View Slide

  11. http://www.flickr.com/photos/vpickering/6824364286/
    Resilient
    Sunday, December 29, 13

    View Slide

  12. Progressive enhancement
    So, the conclusion is that
    this is the best way to
    deal with this. Yay us.
    Next, how do we do that.
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    Sunday, December 29, 13

    View Slide

  13. HTML
    CSS
    The path to render
    START
    RENDER
    Sunday, December 29, 13

    View Slide

  14. HTML
    CSS
    The path to render
    FONT
    FONT
    FONT
    START
    RENDER
    Sunday, December 29, 13

    View Slide

  15. HTML
    CSS
    The path to render
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    Sunday, December 29, 13

    View Slide

  16. HTML
    CSS
    The path to render
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    Sunday, December 29, 13

    View Slide

  17. What causes this?
    FALLBACK BLOCKING BLOCKING +
    TIMEOUT
    Internet Explorer Safari
    Mobile Safari
    Chrome
    Opera (Blink)
    Firefox
    Opera (Presto)
    Sunday, December 29, 13

    View Slide

  18. http://www.flickr.com/photos/droetker0912/5542920908/
    A solution
    Sunday, December 29, 13

    View Slide

  19. Web font loader
    Provide control over font loading
    Remove fonts from the critical path
    Make cross-browser behaviour consistent
    Sunday, December 29, 13

    View Slide

  20. Web font loader

    Sunday, December 29, 13

    View Slide

  21. Web font loader

    Sunday, December 29, 13

    View Slide

  22. Web font loader

    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };
    Sunday, December 29, 13

    View Slide

  23. Web font loader

    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };
    var s = document.createElement('script');
    s.src = '//ajax.googleapis.com/webfonts.js';
    document.head.appendChild(s);
    Sunday, December 29, 13

    View Slide

  24. Web font loader


    Sunday, December 29, 13

    View Slide

  25. Web font loader


    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }
    Sunday, December 29, 13

    View Slide

  26. http://www.flickr.com/photos/droetker0912/5542920908/
    More solutions
    Sunday, December 29, 13

    View Slide

  27. Sunday, December 29, 13

    View Slide

  28. Sunday, December 29, 13

    View Slide

  29. Sunday, December 29, 13

    View Slide

  30. Sunday, December 29, 13

    View Slide

  31. Requirements
    Sunday, December 29, 13

    View Slide

  32. Requirements
    Never block rendering
    Sunday, December 29, 13

    View Slide

  33. Requirements
    Never block rendering
    Avoid flash of fallback font
    Sunday, December 29, 13

    View Slide

  34. Requirements
    Never block rendering
    Avoid flash of fallback font
    Compress and subset fonts as much as possible
    Sunday, December 29, 13

    View Slide

  35. Requirements
    Never block rendering
    Avoid flash of fallback font
    Compress and subset fonts as much as possible
    Reduce HTTP requests to as few as possible
    Sunday, December 29, 13

    View Slide

  36. Requirements
    Never block rendering
    Avoid flash of fallback font
    Compress and subset fonts as much as possible
    Cache as aggressively as browsers allow
    Reduce HTTP requests to as few as possible
    Sunday, December 29, 13

    View Slide

  37. Requirements
    Never block rendering
    Avoid flash of fallback font
    Compress and subset fonts as much as possible
    Cache as aggressively as browsers allow
    Reduce HTTP requests to as few as possible
    Websites do not need to look the
    same in every browser
    Sunday, December 29, 13

    View Slide

  38. base64 encoding
    Applied with data uri scheme
    Can still load asynchronously
    + More control (HTML, JSON, CSS)
    - Complicates build process
    - Font format support must be detected
    + Easily combine fonts into one file
    Sunday, December 29, 13

    View Slide

  39. @font-face {
    font-family: Clarendon;
    src: url(data:application/x-font-woff;base64,d09GRgABAAAAAE
    +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
    Sunday, December 29, 13

    View Slide

  40. Base64 encoding
    Applied with data uri scheme
    Can still load asynchronously
    + More control (HTML, CSS, JSON, XML)
    - Complicates build process
    - Font format support must be detected
    + Easily combine fonts into one file
    Sunday, December 29, 13

    View Slide

  41. Defer fonts to second page
    Download the font on the first page but don’t
    show it until second page.
    Check page views per visit metrics
    + Avoids FOUT on subsequent pages
    - Fonts missing on first page view
    Sunday, December 29, 13

    View Slide

  42. Subsetting
    Subset to your primary character set
    Strip out any other unnecessary icon glyphs
    Fonts must be as small as possible
    Sunday, December 29, 13

    View Slide

  43. Hinting
    Test things
    + Improves type rendering on some platforms
    - Increases font file sizes
    Deliver a readable web font or no web font
    Sunday, December 29, 13

    View Slide

  44. Caching
    HTTP caching is vital
    + Stops fonts being downloaded unnecessarily
    - Various methods differ in complexity
    localStorage works
    Appcache (might) work
    Sunday, December 29, 13

    View Slide

  45. Progressive enhancement
    Sunday, December 29, 13

    View Slide

  46. Modern browsers only
    Progressive enhancement
    Sunday, December 29, 13

    View Slide

  47. Modern browsers only
    WOFF support only
    Progressive enhancement
    Sunday, December 29, 13

    View Slide

  48. Modern browsers only
    WOFF support only
    localStorage available
    Progressive enhancement
    Sunday, December 29, 13

    View Slide

  49. MODERN
    BROWSER?
    NO FONTS SHOW FONTS
    NO
    NO
    SUPPORT WOFF?
    FONTS IN
    STORAGE?
    NO
    Guardian: before text renders
    Sunday, December 29, 13

    View Slide

  50. STORAGE
    AVAILABLE?
    NO FONTS SHOW FONTS
    NO
    DOWNLOAD FONTS:
    BASE64 ENCODED
    IN JSON
    CACHE FONTS
    IN STORAGE
    Guardian: after text renders
    Sunday, December 29, 13

    View Slide

  51. STORAGE
    AVAILABLE?
    NO FONTS SHOW FONTS
    NO
    DOWNLOAD FONTS:
    BASE64 ENCODED
    IN JSON
    CACHE FONTS
    IN STORAGE
    Guardian: after text renders
    Sunday, December 29, 13

    View Slide

  52. Responsibility
    Sunday, December 29, 13

    View Slide

  53. Thank-you!
    http://lanyrd.com/sckmwb
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Sunday, December 29, 13

    View Slide