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

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">
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>  
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
56. http://stateofwebtype.com/
57. LET’s LOOK at a REAL WORLD EXAMPLE
58. instagram.com 6 @font-face BLOCKS
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 “
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
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
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
134. fontfamily.io
135. MINIMIZE THE FALLBACK to WEBFONT REFLOW
136. font-­‐family   FALLBACK STYLE font-­‐size   font-­‐size-­‐adjust   line-­‐height
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