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

A Brief History of that Time You Used Web Fonts

E1899004c71c7043343196103e210be3?s=47 zachleat
October 21, 2015

A Brief History of that Time You Used Web Fonts

A talk given for SmashingConf Barcelona 2015.

http://smashingconf.com/barcelona-2015/speakers/zach-leatherman

E1899004c71c7043343196103e210be3?s=128

zachleat

October 21, 2015
Tweet

Transcript

  1. A BRIEF HISTORY of that time YOU USED WEBFONTS

  2. @zachleat zachleat.com

  3. IN THE BEGINNING 4,500,000,000 Years Ago

  4. IN THE BEGINNING 4,500,000,000 Years Ago IN 1995

  5. IN THE BEGINNING 4,500,000,000 Years Ago VERDANA GEORGIA COURIER NEW

    TIMES NEW ROMAN IMPACT COMIC SANS MS THERE WAS ARIAL IN 1995
  6. <font  face="Arial">

  7. None
  8. http://acumin.typekit.com/

  9. FAST FORWARD TO TODAY

  10. @font-­‐face  {    font-­‐family:  Open  Sans;    src:  url('opensans.woff2')  format('woff2'),

             url('opensans.woff')  format('woff');   }
  11. N C T @

  12. N T O F C A F E @ -

  13. 56% http://httparchive.org/trends.php OF WEB SITES

  14. http://httparchive.org/trends.php AVERAGE PAYLOAD 105KB

  15. 0 350 700 1050 1400 CSS javaScript Images WebFonts TRANSFER

    SIZE
  16. REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT

  17. REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT

  18. NOT ALL REQUESTS ARE CREATED EQUAL

  19. PERCEIVED PERFORMANCE

  20. IMG

  21. CSS

  22. JavaScript

  23. WEB FONT

  24. @font-­‐face  {    font-­‐family:  Open  Sans;    src:  url('opensans.woff2')  format('woff2'),

             url('opensans.woff')  format('woff');   }
  25. IS 30% SMALLER THAN WOFF On average across all of

    Google Fonts: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion WOFF2
  26. Woff caniuse.com 6 5 7.5 7

  27. 62% 38% 4.3 and below 4.4+ WOFF

  28. @font-­‐face  {    font-­‐family:  Open  Sans;    src:  url('opensans.woff2')  format('woff2'),

             url('opensans.woff')  format('woff'),          url('opensans.otf')  format('opentype');   }
  29. <!doctype  html>   <style>   @font-­‐face  {    font-­‐family:  Open

     Sans;    src:  url('opensans.woff2')  format('woff2'),          url('opensans.woff')  format('woff');   }   </style>  
  30. None
  31. dAY 0 since last pluralization ERROR

  32. IF NOT USED NOT DOWNLOADED

  33. <p  style="font-­‐family:  Open  Sans"></p>

  34. <p  style="font-­‐family:  Open  Sans">      Content.   </p>

  35. 36+ 23+ 6.1+ 2.3+ 7+ DOWNLOADS WITH <p></p> 28+ 9+

    DOWNLOADS WITH <p>Content</p>
  36. RESTRICT TO SPECIFIC CHARACTERS

  37. @font-­‐face  {      font-­‐family:  Ampersand;      src:  url('ampersand.woff2')

     format('woff2'),                url('ampersand.woff')  format('woff');      unicode-­‐range:  U+26;   } unicode- range
  38. Needs an _ Ampersand serif p  {      font-­‐family:

     Ampersand,  serif;   }
  39. unicode- range 36 9+ 23 8+ 2.1+ 8+ Supported Supported

    with SMART DOWNLOAD NOT SUPPORTED
  40. EXACT MATCH ON Font-Family ✔ @FONT-FACE DOWNLOAD CHECKLIST

  41. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST
  42. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ELEMENT HAS CONTENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔
  43. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ELEMENT HAS CONTENT CONTENT IS WITHIN UNICODE-RANGE ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔ ✔
  44. http://www.w3.org/TR/css3-fonts/ FONT-WEIGHT FONT-STYLE EXACT MATCH

  45. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  400;      font-­‐style:  normal;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  400;      font-­‐style:  normal;   } ✔
  46. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  600;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  100;   } ✘
  47. MisMatch weight 600 Available, 100 assigned, FORCED BOLD p  {

         font-­‐family:  My  Web  Font;      font-­‐weight:  100;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐weight:  600;   } ✘ ✘ ✔ ✔
  48. MISMATCH STYLE ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC p  {

         font-­‐family:  My  Web  Font;      font-­‐style:  normal;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐style:  italic;   } ✘ ✘ ✔ ✔
  49. 100  200  300  400  500  600  700  800  900 FONT-WEIGHT

    <p> ‐ ‐ Normal/Roman Bold @font-­‐face ‑
  50. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  500;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  600;   } ✘
  51. FAUX BOLD p  {      font-­‐family:  My  Web  Font;

         font-­‐weight:  600;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐weight:  500;   }
  52. FAUX ITALIC p  {      font-­‐family:  My  Web  Font;

         font-­‐style:  italic;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐style:  normal;   }
  53. <style>   @font-­‐face  {      font-­‐weight:  400;    

     font-­‐style:  normal;   }   </style>   <p>      Roman  Text      <strong>Bold  Text</strong>      <em>Italic  Text</em>   </p>
  54. FONT-SYNTHESIS https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

  55. None
  56. http://stateofwebtype.com/

  57. LET’s LOOK at a REAL WORLD EXAMPLE

  58. instagram.com 6 @font-face BLOCKS

  59. None
  60. None
  61. None
  62. None
  63. <i>

  64. .page-­‐home  .content  .home-­‐login  i  {      font-­‐style:  normal;  

    }
  65. TRIGGER A FONT DOWNLOAD BEHAVIOR WHILE DOWNLOADING

  66. LOCAL FONT { @FONT-FACE {

  67. Flash of Invisible Text F O I T

  68. FOIT

  69. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

  70. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

  71. People will visit a Web site less often if it

    is slower than a close competitor by more than 250 milliseconds.” http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html “
  72. None
  73. None
  74. https://twitter.com/zoompf/status/578901383253995520

  75. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

  76. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

  77. FONT REQUESTs ARE A SINGLE POINT OF FAILURE

  78. STOP BUTTON HAS NO EFFECT

  79. LOCAL FONT { @FONT-FACE {

  80. Flash of UNSTYLED Text F O U T

  81. FOUT

  82. IS 3 SECONDS A GOOD TIMEOUT?

  83. 40% abandon your website before it finishes loading 13 children

    are born 10,200,000 Emails are sent
  84. WARNING THE NEXT SLIDE CONTAINS GRAPHIC IMAGERY THAT SOME VIEWERS

    MAY FIND DISTURBING
  85. ♥ and

  86. LOCAL FONT { @FONT-FACE {

  87. ANTI- PATTERNS A N TI-PA TTER N

  88. CSS ONLOAD A N TI-PA TTER N

  89. <style>   h1  {  font-­‐family:  serif;  }   .loaded  h1

     {  font-­‐family:  My  Web  Font;  }   </style>   <link  href="fonts.css"   onload="document.body.className+='   loaded';"  rel="stylesheet">   A N TI-PA TTER N
  90. BLOCKING FONTS.CSS Blocking FONT REQUESTS onload DEFAULT BROWSER BEHAVIOR DANGER

    ZONE A N TI-PA TTER N
  91. ASYNC- CSSwith DATA-URIS A N TI-PA TTER N

  92. filamentgroup / loadcss https://github.com/filamentgroup/loadCSS

  93. None
  94. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     src:  url('data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...')  format('woff');   }   @font-­‐face  {      font-­‐family:  My  Web  Font;      src:  url('data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...')  format('woff');      font-­‐weight:  700;   } A N TI-PA TTER N
  95. ASYNC FONTS.CSS REPAINT DEFAULT BROWSER BEHAVIOR DANGER ZONE A N

    TI-PA TTER N
  96. A N TI-PA TTER N

  97. INLINE DATA URIS WITH MAIN CSS A N TI-PA TTER

    N
  98. A N TI-PA TTER N

  99. ONE 50KB CSS REQUEST A N TI-PA TTER N

  100. NOT JUST A PERFORMANCE PROBLEM

  101. https://twitter.com/jmuspratt/status/561239961924403200 Read more: http://zachleat.com/web/mitt-romney-webfont-problem/ A N TI-PA TTER N

  102. https://twitter.com/jmuspratt/status/561239961924403200 Read more: http://zachleat.com/web/mitt-romney-webfont-problem/ A N TI-PA TTER N

  103. https://twitter.com/jmuspratt/status/561239961924403200 Read more: http://zachleat.com/web/mitt-romney-webfont-problem/ A N TI-PA TTER N

  104. None
  105. None
  106. USING FONT ICONS A N TI-PA TTER N

  107. A N TI-PA TTER N

  108. https://twitter.com/raganwald/status/452092613529567233 GitHub A N TI-PA TTER N

  109. A N TI-PA TTER N

  110. READ AS x2261 ≡ IDENTICAL TO x2605 ★ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY A N TI-PA TTER N
  111. REPLACE YOUR FONT ICONS WITH SVG

  112. EMBRACE MORE FOUT

  113. AT A BARE MINIMUM ADD A TIMEOUT

  114. EVEN BETTER EMBRACE FULL FOUT

  115. font-DISPLAY CSS DESCRIPTOR https://tabatkins.github.io/specs/css-font-display/ from Kenji Baheux, Tab Atkins

  116. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     full  FOUT  */      font-­‐display:  swap;   }
  117. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     100ms  maximum  FOIT  */      /*  Do  not  repaint  after  3s  */      font-­‐display:  fallback;   }
  118. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     100ms  maximum  FOIT  */      /*  never  FOUT  */      /*  if  not  in  cache,  use  fallback  */      font-­‐display:  optional;   }
  119. CSS Font Loading http://dev.w3.org/csswg/css-font-loading/

  120. FONTFACEONLOAD github.com/zachleat/fontfaceonload USES THE CSS FONT LOADING API WHEN AVAILABLE.

    FONTFACEOBSERVER github.com/bramstein/fontfaceobserver/ INCLUDES A NICE PROMISES POLYFILL
  121. var  doc  =  document,          docEl  =

     doc.documentElement;   doc.fonts.load("1em  Raleway")    .then(function()  {          //  The  font  has  loaded.      docEl.className  +=  "  raleway-­‐loaded";    });
  122. body  {      font-­‐family:  sans-­‐serif;   }   .raleway-­‐loaded

     body  {      font-­‐family:  Raleway,  sans-­‐serif;   }
  123. FONT REQUEST DEFAULT BROWSER BEHAVIOR DANGER ZONE REPAINT

  124. FONT REQUEST FORCE  FONT  LOAD REPAINT

  125. https://twitter.com/jmuspratt/status/561239961924403200

  126. FONT REQUESTS REPAINT REPAINT MITT ROMNEY FONT LOADING DANGER ZONE

  127. ONE REPAINT TO RULE THEM ALL

  128. Promise.all([      document.fonts.load("400  1em  Raleway"),      document.fonts.load("700  1em

     Raleway")   ]).then(function  ()  {      docEl.className  +=  "  raleway-­‐loaded";   }); ‑ document.fonts.load("1em  Raleway").then(function()  {      docEl.className  +=  "  raleway-­‐loaded";   }); BECOMES
  129. MITT ROMNEY FONT LOADING DANGER ZONE FONT REQUESTS REPAINT REPAINT

  130. FONT REQUESTS REPAINT REPAINT

  131. FALLBACKS ARE IMPORTANT

  132. None
  133. None
  134. fontfamily.io

  135. MINIMIZE THE FALLBACK to WEBFONT REFLOW

  136. font-­‐family   FALLBACK STYLE font-­‐size   font-­‐size-­‐adjust   line-­‐height

  137. None
  138. None
  139. None
  140. EASE THE TRANSITION FROM FALLBACK TO WEBFONT

  141. THE DEFAULT BROWSER BEHAVIOR FOR FONT-LOADING IS HARMFUL TO CONTENT

    ON THE WEB. FONT-LOADING
  142. TAKE THE ROAD LESS TRAVELED

  143. USE A FONT LOADING STRATEGY

  144. @zachleat zachleat.com