Remodeling @font-face

E1899004c71c7043343196103e210be3?s=47 zachleat
December 10, 2014

Remodeling @font-face

Delivered at Smashing Conference Whistler 2014

E1899004c71c7043343196103e210be3?s=128

zachleat

December 10, 2014
Tweet

Transcript

  1. N REMODELING C T @

  2. REMODELING N T O F C A F E @

    -
  3. @zachleat zachleat.com

  4. None
  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
  21. None
  22. None
  23. 1997 @font-­‐face

  24. 3.0 4.0

  25. None
  26. None
  27. None
  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

  79. None
  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
  122. None
  123. None
  124. https://twitter.com/raganwald/status/452092613529567233 GitHub

  125. https://twitter.com/raganwald/status/452092613529567233 GitHub

  126. None
  127. None
  128. None
  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?

  149. None
  150. None
  151. None
  152. None
  153. None
  154. None
  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

  192. None
  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!