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

Faster (and Coincidentally more secure) Webfonts

Bram Pitoyo
February 15, 2014

Faster (and Coincidentally more secure) Webfonts

As cloud-hosted webfonts becomes the preferred way to go, it’s high time we understand methods that they use to make webfonts load faster and more resistant to copying, that you can pick and choose to optimize your next project.

The first version of this presentation was presented in 2010: http://www.slideshare.net/brampitoyo/font-conf

Bram Pitoyo

February 15, 2014
Tweet

Other Decks in Design

Transcript

  1. 4

  2. 1. Load page 2. Check for Flash and designated id/class

    3. Create Flash movie 4. ActionScript draw
  3. my principle Fonts should be naked, or come with minimal

    obscuring, because it creates the best user & developer experience.
  4. my principle Fonts should be naked, or come with minimal

    obscuring, because it creates the best user & developer experience.
  5. my principle Fonts should be naked, or come with minimal

    obscuring, because it creates the fastest experience.
  6. my principle Fonts should be naked, or come with minimal

    obscuring, because it creates the most compatible experience
  7. my philosophy Fonts should be naked, or come with minimal

    obscuring, because it creates the most @font-face browsers
  8. my principle Fonts should be naked, or come with minimal

    obscuring, because it creates the least complex experience.
  9. my philosophy Fonts should be naked, or come with minimal

    obscuring, because it creates the less bugs for you and me
  10. u+2000-cf, 2150-f Punc., Currency, Number Forms ! !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ !

    ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ ! --‒–—―‖‗‘’‚‛“”„‟†‡•‣․‥…‧ ‰‱′″‴‵‶‷‸‹›※‼‽‾‿⁀⁁⁂⁃⁄⁅⁆⁇⁈⁉⁊⁋⁌⁍⁎⁏⁐⁑⁒⁓⁔ ⁕⁖⁗⁘⁙⁚⁛⁜⁝⁞⁰ⁱ⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ₀₁₂₃₄₅₅₆₇₈₉₊₋₌₍₎₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵ ⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟
  11. benefit Most of our documents are designed to be typeset

    in 1 language (faster to load only what you use).
  12. css

  13. caveat The aggregate size of multiple subsetted files is bigger

    than one single file that contains everything.
  14. rule of thumb Just enough subset files to load parallel

    and be secure, but not too many. (Most services use 2).
  15. ?

  16. caveat “Large data URIs inlined in render-blocking css are harmful

    for render performance.” https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194
  17. benefit If you don’t pass the file through a Base-64

    decoder, you can’t have it (harder to pirate).
  18. ?

  19. “Most of the important foundries are supporting #webfont” ! – Tiffany

    Wardle http://blog.typegirl.com/post/142912558/most-of-the-important-foundries-are-supporting-webfont
  20. mid 2009: “We […] combined our zot and .webfont proposals

    into a new WebOTF proposal.” http://lists.w3.org/Archives/Public/www-font/2009JulSep/1238.html
  21. “We endorse the woff specification […] as a Web font

    format.” ! – Mozilla https://blog.mozilla.org/blog/2009/10/20/mozilla-supports-web-open-font-format/
  22. early 2010: Submission request to w3c, endorsed by Microsoft and

    Opera. http://www.w3.org/Submission/2010/03/
  23. one set multiple subsets linked 2 requests 142.25 kb 6

    requests 173.76 kb embedded 1 request 89.53 kb 1 request 183.43 kb
  24. ttf woff one set multiple subsets linked 142.25 kb 73.48

    kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
  25. ttf woff one set multiple subsets linked 142.25 kb 73.48

    kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
  26. ttf woff one set multiple subsets linked 142.25 kb 73.48

    kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
  27. ttf woff one set multiple subsets linked 142.25 kb 73.48

    kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
  28. ?

  29. flash of unstyled text Used to be a problem in

    Firefox, Opera & ie 7–9. Eliminated in 2011.
  30. caveat Because you can no longer see text until font

    is loaded, make loading time as fast as possible.
  31.    Three methods 2. Via Chris Coyier:    Load page without    font.

    Load font when    page is done. Onreload,    font shows instantly. http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/
  32.    Three methods 3. Responsify    Use @font-face, but    only specify it

    when    screen size is large.    – Dave Rupert http://codepen.io/davatron5000/pen/nrfGA
  33. ?

  34. “…allow applications to be gentle with the user’s bandwidth when

    they know it is rare or expensive.” http://www.w3.org/TR/netinfo-api/
  35. if (navigator.connection.bandwidth > 2) { i.src = "http://example.com/pony_hd.png"; } else

    { i.src = "http://example.com/pony_ld.png"; } http://www.w3.org/TR/netinfo-api/
  36. ?