Remodeling @font-face

Delivered at Smashing Conference Whistler 2014

Transcript

1. N REMODELING C T @
2. REMODELING N T O F C A F E @ -
3. @zachleat zachleat.com
5. MOTIVATION THIS ONE WEIRD TRICK A G EN D A FORMATS LOADING.. . .. . DOwNLOAD
6. @font-face
7. 45% http://httparchive.org/trends.php?s=Top1000 of the top 1000
8. http://httparchive.org/trends.php?s=Top1000 AVERAGE PAYLOAD 68KB
9. 0 275 550 825 1100 CSS javaScript Images WebFonts TRANSFER SIZE
10. REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT
11. REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT
12. NOT ALL REQUESTS ARE CREATED EQUAL
13. What is in THE critical path?
14. EFFECT ON PERCEIVED PERFORMANCE
15. EFFECT ON PERCEIVED PERFORMANCE NON-BlockING
16. EFFECT ON PERCEIVED PERFORMANCE NON-BlockING IMAGES
17. EFFECT ON PERCEIVED PERFORMANCE BlockING NON-BlockING IMAGES
18. EFFECT ON PERCEIVED PERFORMANCE BlockING NON-BlockING IMAGES JAVASCRIPT
19. EFFECT ON PERCEIVED PERFORMANCE BlockING NON-BlockING IMAGES CSS JAVASCRIPT
20. EFFECT ON PERCEIVED PERFORMANCE BlockING NON-BlockING WEB FONTS IMAGES CSS JAVASCRIPT
23. 1997 @font-­‐face
24. 3.0 4.0
28. 1997 @font-­‐face
29. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:  url('icanfont.woff')            format('woff'),                url('icanfont.ttf')            format('truetype');   }
30. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:    url('icanfont.woff')            format('woff'),          url('icanfont.ttf')            format('truetype');   }
31. WHAT FORMATS?
32. David Hasselwoff USE WOFF
33. Woff caniuse.com 6 5 7.5 7
34. 6 5 7.5 7 Woff caniuse.com
35. 6 5 7.5 7 Woff caniuse.com + OTF or TTF ( )
36. vs. OTF TTF
37. vs. OTF TTF
38. vs. OTF TTF AN EXTENSION TO TTF
39. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES:
40. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES: LIGATURES
41. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES: LIGATURES SMALLCAPS
42. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES: LIGATURES SMALLCAPS ET CETERA
43. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES: LIGATURES MORE UBIQUITOUS SMALLCAPS ET CETERA
44. https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings font-feature-settings CSS PROPERTY
45. http://stateofwebtype.com/beta/ STATE OF WEB TYPE
46. DON’T STOP at WOFF + OTF
47. WOFF BY ONE ERROR
48. Woff caniuse.com + OTF or TTF ( ) WOFF2 +
49. Woff caniuse.com + OTF or TTF ( ) WOFF2 + 6 5 7.5 7
50. 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
51. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:  url('icanfont.woff2')            format('woff2'),          url('icanfont.woff')            format('woff'),          url('icanfont.otf')            format('opentype');   }
52. WOFF2 See The Wizard
53. NEED IE8? Add EOT
54. NEED IE8?
55. NEED IE8? ARE YOU SURE?
56. ICON FONTS
57. SUPPLEMENTaL IC O N FO N T STANDALONE Share on Twitter Menu
58. DIFFERENT USE CASE DIFFERENT @FONT-FACE STACK
59. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:  url('icanfont.eot?#iefix')                    format('embedded-­‐opentype'),                url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),          url('icanfont.ttf')            format('truetype');   } IC O N FO N T
60. SVG FONTS D EFIN ITELY N O
61. SVG FONTS D EFIN ITELY N O
62. WWTkD
63. WWT k D YPE IT
64. https://twitter.com/bram_stein/status/506812176212824066
65. SVG * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
66. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
67. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG REMOVED FROM CHROME* * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
68. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG REMOVED FROM CHROME* * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA NEVER SUPPORTED ON IE, Firefox.
69. 6 5 7.5 7 Woff caniuse.com + TTF + SVG
70. 6 5 7.5 7 Woff caniuse.com + TTF + SVG 6 4.1
71. https://github.com/scottjehl/Device-Bugs/issues/43 TH IS IS B A D
72. TH IS IS B A D
73. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:  url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),                url('icanfont.otf')            format('opentype'),                url('icanfont.svg#icantfont')            format('svg');   }
74. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src:  url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),                url('icanfont.otf')            format('opentype'),                url('icanfont.svg#icantfont')            format('svg');   }
75. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src: }                                                url('icanfont.otf')              format('opentype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'),
76. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src: }                                                url('icanfont.ttf')              format('truetype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'),
77. @font-­‐face  {     font-­‐family:  The  Font  that  Could;     src: }          url('icanfont.eot?#iefix')                    format('embedded-­‐opentype'),                                                url('icanfont.otf')              format('opentype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'), IC O N FO N T
78. LET’s PUT THE @FONT-FACE BLOCK ON OUR WEB PAGE
80. IF NOT USED, NOT DOWNLOADED
81. <div  style="font-­‐family:  The  Font   That  Could"></div> 9+
82. <div  style="font-­‐family:  The  Font   That  Could">Needs  Content.</div>
83. 8 36 23 6.1–8 2.3, 4.1 7–8 DOWNLOADS WITH EMPTY ATTACHED NODE DOWNLOADS EVERY TIME DOWNLOADS WITH NON-EMPTY ATTACHED NODE 28 9–11
84. 8 36 23 6.1–8 2.3, 4.1 7–8 DOWNLOADS WITH EMPTY ATTACHED NODE DOWNLOADS EVERY TIME DOWNLOADS WITH NON-EMPTY ATTACHED NODE 28 9–11
85. /*  Does  not  download  */   var  el  =  document.createElement('div');   el.style.fontFamily  =  'The  Font  That  Could';   /*  Initiates  download  in  Firefox,  IE  9+  */   document.body.appendChild(el);   /*  Initiates  download  in  WebKit/Blink  */   el.innerHTML  =  'Content.';
86. unicode- range
87. BASIC LATIN CODE POINT Arial Chunk Five x26 & & x41 A A x42 B B x43 C C x44 D D x45 E E
88. @font-­‐face  {     font-­‐family:  Ampersands;     src:  url('sands.woff2')  format('woff2'),                url('sands.woff')  format('woff'),                url('sands.ttf')  format('truetype');      unicode-­‐range:  U+26;   } unicode- range
89. <div  style="font-­‐family:  Ampersands">   </div> Needs  Content.   unicode- range
90. <div  style="font-­‐family:  Ampersands">   </div> &roid.   unicode- range
91. &roid
92. &roid FALLBACK AMPERSANDS
93. unicode- range 36 9, 10, 11 23 8 4.1 8 ALWAYS DOWNLOADS SMART DOWNLOAD NOT SUPPORTED
94. unicode- range 36 9, 10, 11 23 8 4.1 8 ALWAYS DOWNLOADS SMART DOWNLOAD NOT SUPPORTED
95. ALWAYS SUBSET FONTS WHEN USING UNICODE-RANGE
96. SUBSET OR ELSE &roid AMPERSANDS
97. http://www.fontsquirrel.com/tools/webfont-generator
98. https://www.flickr.com/photos/79157069@N03/11616536203/ OUR @FONT-FACE REQUEST LEAVES THE NEST
99. LOCAL FONT { @FONT-FACE {
100. LOCAL FONT { @FONT-FACE {
101. Flash of Invisible Text
102. FOIT
103. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0
104. http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0
105. http://www.webpagetest.org/video/compare.php?tests=141205_QN_160H-r:1-c:0
106. http://www.webpagetest.org/video/compare.php?tests=141205_QN_160H-r:1-c:0
107. http://www.webpagetest.org/video/compare.php?tests=141205_QN_160H-r:1-c:0
108. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
109. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
110. http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0
111. LOCAL FONT { @FONT-FACE {
112. LOCAL FONT { @FONT-FACE {
113. Flash of UNSTYLED Text
114. FOUT
115. LOCAL FONT { @FONT-FACE {
116. LOCAL FONT { @FONT-FACE {
117. Flash of UNSTYLED Text
118. FOUT
119. FOUT WITH 0 SECOND TIMEOUT
120. ICON FONTS
121. YOUR ICON FONT HERE 0xe001 0xe002 0xe003 0xe004 PRIVATE USE AREA
124. https://twitter.com/raganwald/status/452092613529567233 GitHub
125. https://twitter.com/raganwald/status/452092613529567233 GitHub
129. FOUT FOIT REVIEW
130. FOIT
131. ABCDEFGH FOIT @FONT-FACE LOAD
132. FOIT IC O N FO N T
133. FOIT IC O N FO N T @FONT-FACE LOAD
134. FOUT, 3 seconds
135. 3 S ABCDEFGH FOUT, 3 seconds
136. 3 S ABCDEFGH FOUT, 3 seconds @FONT-FACE LOAD
137. IC O N FO N T FOUT, 3 seconds
138. 3 S IC O N FO N T FOUT, 3 seconds
139. 3 S @FONT-FACE LOAD IC O N FO N T FOUT, 3 seconds
140. FOUT, 0 seconds ABCDEFGH
141. ABCDEFGH FOUT, 0 seconds @FONT-FACE LOAD
142. FOUT, 0 seconds IC O N FO N T
143. SUCCESS. FOUT, 0 seconds IC O N FO N T
144. SUCCESS. FOUT, 0 seconds IC O N FO N T equivalent to FOIT IF YOU USE THE PUA
145. Timeouts 36 28 9–11 0 S 23 3 S 3 s 3 s 8 > 60 s 4.1 > 60 s 6 > 60 s > 60 s 8
146. WHAT HAPPENS WHEN A USER HITS THE STOP BUTTON?
147. LOCAL FONT { @FONT-FACE { TH IS IS B A D
148. HOW’S EVERYONE DOING?
155. LET’S FIX STUFF.
156. Code
157. Code
158. FOIT & FOUT CONTROL OF NEED MORE
159. CSS Font Loading http://dev.w3.org/csswg/css-font-loading/
160. var  doc  =  document,          docEl  =  doc.documentElement;   doc.fonts.load("1em  Raleway")     .then(function()  {          //  The  font  has  loaded.       docEl.className  +=  "  raleway-­‐loaded";     });
161. body  {      font-­‐family:  sans-­‐serif;   }   .raleway-­‐loaded  body  {      font-­‐family:  Raleway,  sans-­‐serif;   }
162. FONTFACEONLOAD github.com/zachleat/fontfaceonload (GZIP) 1.5KB JS USES THE CSS FONT LOADING API WHEN AVAILABLE.
163. var  docEl  =  document.documentElement;   FontFaceOnload(  "Raleway",  {     success:  function()  {       //  The  font  has  loaded.       docEl.className  +=  "  raleway-­‐loaded";     }   });
164. FOUT RALEWAY
165. FOUT @FONT-FACE LOAD
166. EMBRACE THE FOUT
167. fontfamily.io
168. font-rendering CSS PROPERTY https://github.com/KenjiBaheux/css-font-rendering from Kenji Baheux, Ilya Grigorik, David Kuettel, Tab Atkins
169. body  {     font-­‐family:  Raleway;      font-­‐rendering:  block  0s  swap  infinite;   } FOUT FOIT
170. ICON FONTS
171. var  doc  =  document,          docEl  =  doc.documentElement;   FontFaceOnload(  "My  Icon  Font",     {       glyphs:  "\uE600\uE601\uE602\uE605",       success:  function()  {                //  The  font  has  loaded.         docEl.className  +=  "  icon-­‐font-­‐loaded";       }     }); IC O N FO N T
172. <span  class="twitter"     aria-­‐hidden="true"></span>   Share  on  Twitter Share on Twitter SUPPLEMENTaL IC O N FO N T
173. .icon-­‐font-­‐loaded  .twitter:before  {     font-­‐family:  My  Icon  Font;     content:  "\e600";   } IC O N FO N T
174. FOIT IC O N FO N T Share on Twitter
175. FOIT IC O N FO N T @FONT-FACE LOAD Share on Twitter
176. EMBRACE THE FOIT IC O N FO N T
177. STANDALONE IC O N FO N T
178. https://twitter.com/bjankord/status/451367657493647361 Hamburger Helper
179. Hamburger Emoji
180. = Veggieburger
181. – Gluten Free Hamburger https://twitter.com/brouxhaha/status/464787128334180354
182. Facebook’s Manburger https://twitter.com/jedschmidt/status/455871778267463680
183. Hungryman Burger
184. https://twitter.com/patrick_h_lauke/status/535473606965624832 Hamburgler Menu
185. FOUT, TEXT to ICON IC O N FO N T MENU
186. FOUT, TEXT to ICON IC O N FO N T @FONT-FACE LOAD
187. <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">MENU</span>   </span> STANDALONE IC O N FO N T
188. .icon-­‐font-­‐loaded  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e600";   }   .icon-­‐font-­‐loaded  .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   } IC O N FO N T
189. OR IC O N FO N T
190. Higher UNICODE Ranges CODE POINT Arial x2261 ≡ x2605 ★ x2665 ♥ x2603 ‚
191. unicode.johnholtripley.co.uk
193. FOUT, GLYPH TO ICON IC O N FO N T ≡
194. FOUT, GLYPH TO ICON IC O N FO N T @FONT-FACE LOAD
195. <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">MENU</span>   </span> STANDALONE IC O N FO N T
196. .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .hamburger  .icon:before  {     content:  "\2261";   }   .icon-­‐font-­‐loaded  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e600";   } IC O N FO N T
197. READ AS x2261 ≡ IDENTICAL TO x2605 ★ BLACK STAR or STAR x2665 ♥ HEART SUIT ACCESSIBILITY IC O N FO N T
198. <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">MENU</span>   </span> STANDALONE IC O N FO N T
199. FILAMENTGROUP/A-Font-Garde https://github.com/filamentgroup/a-font-garde IC O N FO N T
200. Different GOALS CONTENT ICONFONTS
201. Different GOALS CONTENT ICONFONTS CONTENT ICON
202. FONT-RENDERING CSS Font Loading
203. @zachleat Thank you!