Web Fonts as a Progressive Enhancement, Ampersand 2013

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

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