The Performance and Usability of Font Loading (Velocity Santa Clara 2015)

A deep dive into @font-face for Velocity 2015 in Santa Clara.

http://velocityconf.com/devops-web-performance-2015/public/schedule/detail/41593

Transcript

1. The Performance and
   Usability of Font Loading
   Zach Leatherman
   @zachleat
   

   View Slide

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

   View Slide

3. View Slide

4. THE DEFAULT
   BROWSER BEHAVIOR
   FOR FONT-LOADING
   IS HARMFUL TO BOTH
   THE PERCEIVED PERFORMANCE
   AND INTEGRITY OF
   CONTENT ON THE WEB.
   

   View Slide

5. THE DEFAULT
   BROWSER BEHAVIOR
   FOR FONT-LOADING
   IS HARMFUL TO BOTH
   THE PERCEIVED PERFORMANCE
   AND INTEGRITY OF
   CONTENT ON THE WEB.
   FONT-LOADING
   INTEGRITY
   PERCEIVED PERFORMANCE
   

   View Slide

6. @zachleat
   zachleat.com
   

   View Slide

7. View Slide

8. 47%
   http://httparchive.org/trends.php?s=Top1000
   of the top 1000
   

   View Slide

9. http://httparchive.org/trends.php?s=Top1000
   AVERAGE PAYLOAD
   97KB
   

   View Slide

10. 0
    350
    700
    1050
    1400
    CSS javaScript Images WebFonts
    TRANSFER
    SIZE
    

    View Slide

11. REMOVE AN IMAGE!
    JAVASCRIPT SIZE?
    WORRIED ABOUT
    

    View Slide

12. NOT ALL
    REQUESTS
    ARE CREATED
    EQUAL
    

    View Slide

13. PERCEIVED
    PERFORMANCE
    

    View Slide

14. IMG
    

    View Slide

15. IMG
    

    View Slide

16. View Slide

17. CSS
    

    View Slide

18. View Slide

19. JavaScript
    

    View Slide

20. View Slide

21. WEB FONT
    

    View Slide

22. A
    G
    EN
    D
    A
    TRIGGER A FONT DOWNLOAD
    BEHAVIOR WHILE DOWNLOADING
    1.  
    2.  
    

    View Slide

23. @font-­‐face  {  
     font-­‐family:  The  Font  that  Could;  
     src:  url('icanfont.woff2')  
             format('woff2'),  
           url('icanfont.woff')  
             format('woff'),  
           url('icanfont.otf')  
             format('opentype');  
    }
    

    View Slide

24. WOFF2
    WOFF
    OTF
    SVG
    

    View Slide

25. WOFF2
    WOFF
    OTF
    SVG
    

    View Slide

26. WOFF2
    WOFF
    OTF
    SVG
    T
    

    View Slide

27. 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
    

    View Slide

28.  
     <br/>@font-­‐face  {  <br/>  font-­‐family:  My  Web  Font;  <br/>  src:  url('icanfont.woff2')  format('woff2'),  <br/>      url('icanfont.woff')  format('woff'),  <br/>      url('icanfont.otf')  format('opentype');  <br/>}  <br/>  
    

    View Slide

29. View Slide

30. View Slide

31. dAY
    since last
    pluralization ERROR
    1
    

    View Slide

32. dAY
    0
    since last
    pluralization ERROR
    

    View Slide

33. IF NOT USED,
    NOT DOWNLOADED
    

    View Slide

34. 
    9+
    

    View Slide

35.  
       Needs  Content.  
    
    

    View Slide

36. 8
    36–42
    23–28
    6.1–8
    2.3, 4.1
    7–8
    DOWNLOADS WITH
    EMPTY
    ATTACHED ELEMENT
    DOWNLOADS
    EVERY TIME
    DOWNLOADS WITH
    NON-EMPTY
    ATTACHED ELEMENT
    28–37
    9–11
    

    View Slide

37. 8
    36–42
    23–28
    6.1–8
    2.3, 4.1
    7–8
    DOWNLOADS WITH
    EMPTY
    ATTACHED ELEMENT
    DOWNLOADS
    EVERY TIME
    DOWNLOADS WITH
    NON-EMPTY
    ATTACHED ELEMENT
    28–37
    9–11
    

    View Slide

38. RESTRICT TO
    SPECIFIC
    CHARACTERS
    

    View Slide

39. unicode-
    range
    

    View Slide

40. BASIC
    LATIN
    CODE
    POINTS Arial Chunk Five
    x26 & &
    x41 A A
    x42 B B
    x43 C C
    x2B + +
    x3F ? ?
    

    View Slide

41. @font-­‐face  {  
      font-­‐family:  Ampersand;  
      src:  url('sands.woff2')  format('woff2'),  
                 url('sands.woff')  format('woff'),  
                 url('sands.ttf')  format('truetype');  
       unicode-­‐range:  U+26;  
    }
    unicode-
    range
    

    View Slide

42. Ampersand">Needs  Content.
    

    View Slide

43. Ampersand">Needs  Content.
    

    View Slide

44. Ampersand">Needs  an  &
    

    View Slide

45. Needs an _
    FALLBACK
    Web Font
    

    View Slide

46. unicode-
    range
    36
    9, 10, 11
    23
    8
    4.1
    8
    ALWAYS DOWNLOADS SMART DOWNLOAD
    NOT SUPPORTED
    

    View Slide

47. unicode-
    range
    36
    9, 10, 11
    23
    8
    4.1
    8
    ALWAYS DOWNLOADS SMART DOWNLOAD
    NOT SUPPORTED
    

    View Slide

48. USED IN DOCUMENT CONTENT
    FONT-WEIGHT
    FONT-STYLE
    Images courtesy of http://www.w3.org/TR/css3-fonts/
    

    View Slide

49. USED IN DOCUMENT CONTENT
    FONT-WEIGHT
    FONT-STYLE
    ✔
    Images courtesy of http://www.w3.org/TR/css3-fonts/
    

    View Slide

50.  
     <br/>@font-­‐face  {  <br/>  font-­‐family:  My  Web  Font;  <br/>  src:  url('icanfont.woff2')  format('woff2'),  <br/>      url('icanfont.woff')  format('woff'),  <br/>      url('icanfont.otf')  format('opentype');  <br/>    font-­‐weight:  400;  <br/>    font-­‐style:  normal;  <br/>}  <br/>  
    

    View Slide

51.  <br/>p  {  <br/>    font-­‐family:  My  Web  Font;  <br/>    font-­‐weight:  400;  <br/>    font-­‐style:  normal;  <br/>}  <br/>  
    Roman  Text
    

    View Slide

52. @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;  
    }
    

    View Slide

53. @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;  
    }
    ✔
    

    View Slide

54. 100  200  300  400  500  600  700  800  900
    FONT-WEIGHT
    DEFAULT  CSS  
    font-­‐weight:  normal;
    DEFAULT  CSS  
    font-­‐weight:  bold;
    ‐
    ‑ ‑
    ‐
    Lighter  weights Bolder  weights
    

    View Slide

55. @font-­‐face  {  font-­‐weight:  500;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  400;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  300;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  200;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  100;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  600;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  700;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  800;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  900;  font-­‐style:  normal;  }  
    /*  REPEAT  THE  SAME,  WITH  font-­‐style:  italic;  */
    p  {  
       font-­‐weight:  500;  
       font-­‐style:  normal;  
    }
    

    View Slide

56. 100  200  300  400  500  600  700  800  900
    FONT-WEIGHT
    
    ‐
    ‑
    ‐
    Lighter  weights Bolder  weights
    

    View Slide

57. MisMatch weight
    600 Available, 100 assigned, FORCED BOLD
    p  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  100;  
       font-­‐style:  normal;  
    }
    @font-­‐face  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  600;  
       font-­‐style:  normal;  
    }
    

    View Slide

58. MISMATCH STYLE
    ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC
    p  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  400;  
       font-­‐style:  normal;  
    }
    @font-­‐face  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  400;  
       font-­‐style:  italic;  
    }
    

    View Slide

59. @font-­‐face  {  font-­‐weight:  600;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  700;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  800;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  900;  font-­‐style:  normal;  }  
    /*  FAUX  BOLD  */  
    @font-­‐face  {  font-­‐weight:  500;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  400;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  300;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  200;  font-­‐style:  normal;  }  
    @font-­‐face  {  font-­‐weight:  100;  font-­‐style:  normal;  }  
    /*  END  FAUX  BOLD  */  
    /*  REPEAT  THE  SAME,  WITH  font-­‐style:  italic;  */
    p  {  
       font-­‐weight:  600;  
       font-­‐style:  normal;  
    }
    

    View Slide

60. 100  200  300  400  500  600  700  800  900
    FONT-WEIGHT
    
    ‐
    ‑
    ‐
    Normal/Roman  @font-­‐face Bold  @font-­‐face
    Faux  Bold
    

    View Slide

61. MisMatch weight
    500 Available, 600 assigned, FAUX BOLD
    p  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  600;  
       font-­‐style:  normal;  
    }
    @font-­‐face  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  500;  
       font-­‐style:  normal;  
    }
    

    View Slide

62. MISMATCH STYLE
    p  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  400;  
       font-­‐style:  italic;  
    }
    @font-­‐face  {  
       font-­‐family:  My  Web  Font;  
       font-­‐weight:  400;  
       font-­‐style:  normal;  
    }
    NORMAL AVAILABLE, ITALIC ASSIGNED, FAUX ITALIC
    

    View Slide

63. DISABLE FAUX FONTS WITH
    FONT-SYNTHESIS
    

    View Slide

64. View Slide

65. View Slide

66. http://stateofwebtype.com/
    STATE OF
    WEB TYPE
    

    View Slide

67.  <br/>@font-­‐face  {  <br/>    font-­‐weight:  400;  <br/>    font-­‐style:  normal;  <br/>}  <br/>  
     
       Roman  Text  
       Bold  Text  
       Bold  Text  
       Italic  Text  
       Italic  Text  
    
    

    View Slide

68. BE FRUGAL
    BE
    

    View Slide

69. BE FRUGAL
    BUT NOT TOO
    

    View Slide

70. instagram.com
    6 @font-face BLOCKS
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. 
    

    View Slide

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

    View Slide

79. SAVES 13.4KB
    FOR EACH EMPTY-CACHE PAGELOAD
    TO INSTAGRAM.COM
    

    View Slide

80. i,  cite,  em,  var,  
    address,  dfn,  
    strong,  b,  h1,  h2,  
    h3,  h4,  h5,  h6,  th
    

    View Slide

81. USED IN DOCUMENT CONTENT
    FONT-WEIGHT
    FONT-STYLE
    Images courtesy of http://www.w3.org/TR/css3-fonts/
    

    View Slide

82. USED IN DOCUMENT CONTENT
    FONT-WEIGHT
    FONT-STYLE
    ✔
    Images courtesy of http://www.w3.org/TR/css3-fonts/
    ✔
    ✔
    

    View Slide

83. A
    G
    EN
    D
    A
    TRIGGER A FONT DOWNLOAD
    BEHAVIOR WHILE DOWNLOADING
    1.  
    2.  
    

    View Slide

84. A
    G
    EN
    D
    A
    TRIGGER A FONT DOWNLOAD
    BEHAVIOR WHILE DOWNLOADING
    1.  
    2.  
    

    View Slide

85. FONT FINISHES LOADING
    A
    B
    FONT STARTS LOADING
    @FONT-FACE IS PARSED
    

    View Slide

86. FONT FINISHES LOADING
    A
    B
    FONT STARTS LOADING
    @FONT-FACE IS PARSED
    

    View Slide

87. LOCAL FONT
    {
    @FONT-FACE
    { A
    

    View Slide

88. LOCAL FONT
    {
    @FONT-FACE
    { A B
    

    View Slide

89. Flash of Invisible Text
    F O I T
    

    View Slide

90. FOIT
    

    View Slide

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

    View Slide

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

    View Slide

93. 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
    “
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. https://twitter.com/zoompf/status/578901383253995520
    

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

101. LOCAL FONT
     {
     @FONT-FACE
     { A
     

     View Slide

102. LOCAL FONT
     {
     @FONT-FACE
     { A 3s B
     

     View Slide

103. Flash of UNSTYLED Text
     F O U T
     

     View Slide

104. FOUT
     

     View Slide

105. IS 3 SECONDS
     A GOOD TIMEOUT?
     

     View Slide

106. https://twitter.com/zoompf/status/578901383253995520
     

     View Slide

107. NOT JUST A
     PERFORMANCE
     PROBLEM
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. http://httparchive.org/trends.php?s=Top1000
     of the top 1000
     

     View Slide

112. 47%
     http://httparchive.org/trends.php?s=Top1000
     of the top 1000
     

     View Slide

113. View Slide

114. View Slide

115. LOCAL FONT
     {
     @FONT-FACE
     {
     

     View Slide

116. LOCAL FONT
     {
     @FONT-FACE
     {
     

     View Slide

117. FOUT
     FOIT
     REVIEW
     

     View Slide

118. FOIT
     

     View Slide

119. ABCDEFGH
     FOIT
     @FONT-FACE LOAD
     

     View Slide

120. FOIT to FOUT, 3 seconds
     

     View Slide

121. 3 S
     ABCDEFGH
     FOIT to FOUT, 3 seconds
     

     View Slide

122. 3 S
     ABCDEFGH
     FOIT to FOUT, 3 seconds
     @FONT-FACE LOAD
     

     View Slide

123. FOUT, 0 seconds
     ABCDEFGH
     

     View Slide

124. ABCDEFGH
     FOUT, 0 seconds
     @FONT-FACE LOAD
     

     View Slide

125. “But FOUT is ugly.”
     

     View Slide

126. PNG
     BASELINE
     JPEG
     Progressive
     JPEG
     

     View Slide

127. PNG
     BASELINE
     JPEG
     Progressive
     JPEG
     

     View Slide

128. WebPageTest.org
     

     View Slide

129. SOLUTION
     CONTINUUM
     

     View Slide

130. FOUT
     DO
     NOTHING
     EMBRACE
     BROWSER
     DEFAULTS
     0 SECOND
     TIMEOUT
     FOUT
     FOIT
     N SECOND
     TIMEOUT
     FOIT
     InFINITE
     TIMEOUT
     N  >  0
     

     View Slide

131. FOUT
     DO
     NOTHING
     EMBRACE
     BROWSER
     DEFAULTS
     0 SECOND
     TIMEOUT
     FOUT
     FOIT
     N SECOND
     TIMEOUT
     FOIT
     InFINITE
     TIMEOUT
     N  >  0
     

     View Slide

132. FOUT
     DO
     NOTHING
     EMBRACE
     BROWSER
     DEFAULTS
     0 SECOND
     TIMEOUT
     FOUT
     FOIT
     N SECOND
     TIMEOUT
     FOIT
     InFINITE
     TIMEOUT
     N  >  0
     

     View Slide

133. DO
     NOTHING
     EMBRACE
     BROWSER
     DEFAULTS
     FOIT
     InFINITE
     TIMEOUT
     FONT REQUESTs ARE A
     SINGLE
     POINT OF
     FAILURE
     

     View Slide

134. STOP BUTTON HAS
     NO EFFECT
     

     View Slide

135. ANTI-
     PATTERNS
     

     View Slide

136. CSS
     ONLOAD
     

     View Slide

137.  <br/>h1  {  font-­‐family:  serif;  }  <br/>.loaded  h1  {  font-­‐family:  My  Web  Font;  }  <br/>  
     onload="document.body.className+='  
     loaded';"  rel="stylesheet">  
     

     View Slide

138. @font-­‐face  {  
        font-­‐family:  My  Web  Font;  
        src:  url('icanfont.woff')  format('woff');  
     }  
     @font-­‐face  {  
        font-­‐family:  My  Web  Font;  
        src:  url('icanfontbold.woff')  format('woff');  
        font-­‐weight:  700;  
     }
     

     View Slide

139. View Slide

140. BLOCKING
     FONTS.CSS
     Blocking
     FONT REQUESTS
     

     View Slide

141. BLOCKING
     FONTS.CSS
     Blocking
     FONT REQUESTS
     A Fonts  
     start  
     loading
     

     View Slide

142. BLOCKING
     FONTS.CSS
     Blocking
     FONT REQUESTS
     onload
     A Fonts  
     start  
     loading
     

     View Slide

143. BLOCKING
     FONTS.CSS
     Blocking
     FONT REQUESTS
     onload
     Fonts  
     finish  
     loading
     B
     A Fonts  
     start  
     loading
     

     View Slide

144. ASYNC-
     CSS
     

     View Slide

145.  <br/>h1  {  font-­‐family:  serif;  }  <br/>.loaded  h1  {  font-­‐family:  My  Web  Font;  }  <br/>  
     onload="document.body.className+='  
     loaded';  this.media='all'"  
     rel="stylesheet">  
     

     View Slide

146. BLOCKING
     FONTS.CSS
     

     View Slide

147. ASYNC
     FONTS.CSS
     

     View Slide

148. ASYNC
     FONTS.CSS
     Blocking
     FONT REQUESTS
     

     View Slide

149. ASYNC
     FONTS.CSS
     Blocking
     FONT REQUESTS
     A Fonts  
     start  
     loading
     

     View Slide

150. ASYNC
     FONTS.CSS
     Blocking
     FONT REQUESTS
     onload
     A Fonts  
     start  
     loading
     

     View Slide

151. ASYNC
     FONTS.CSS
     Blocking
     FONT REQUESTS
     onload
     Fonts  
     finish  
     loading
     B
     A Fonts  
     start  
     loading
     

     View Slide

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

     View Slide

153. @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;  
     }
     

     View Slide

154. View Slide

155. ASYNC
     FONTS.CSS
     Font  Data  URIs  
     finish  
     loading
     B
     A Font  Data  URIs  
     start  
     loading
     REPAINT
     

     View Slide

156. View Slide

157. View Slide

158. View Slide

159. ONE 50KB CSS REQUEST
     NO FONT REQUESTS
     

     View Slide

160. @font-­‐face  {  
        font-­‐family:  Roboto;  
        src:  url('data:application/x-­‐font-­‐
     woff;charset=utf-­‐8;base64,...')  format('woff');  
     }  
     @font-­‐face  {  
        font-­‐family:  Roboto;  
        src:  url('data:application/x-­‐font-­‐
     woff;charset=utf-­‐8;base64,...')  format('woff');  
        font-­‐weight:  700;  
     }
     

     View Slide

161. FOUT
     0 SECOND
     TIMEOUT
     FOUT
     FOIT
     N SECOND
     TIMEOUT
     N  >  0
     EMBRACE MORE
     FOUT
     

     View Slide

162. font-rendering CSS PROPERTY
     https://github.com/KenjiBaheux/css-font-rendering
     from Kenji Baheux, Ilya Grigorik, David Kuettel, Tab Atkins
     

     View Slide

163. CSS Font Loading
     http://dev.w3.org/csswg/css-font-loading/
     

     View Slide

164. FONTFACEONLOAD
     github.com/zachleat/fontfaceonload
     USES THE CSS FONT LOADING API WHEN AVAILABLE.
     FONTFACEOBSERVER
     github.com/bramstein/fontfaceobserver/
     INCLUDES A NICE PROMISES POLYFILL
     

     View Slide

165. 0 SECOND
     TIMEOUT
     FOUT
     

     View Slide

166. var  doc  =  document,  
            docEl  =  doc.documentElement;  
     doc.fonts.load("1em  Raleway")  
      .then(function()  {  
            //  The  font  has  loaded.  
        docEl.className  +=  "  raleway-­‐loaded";  
      });
     ‑
     

     View Slide

167. body  {  
        font-­‐family:  sans-­‐serif;  
     }  
     .raleway-­‐loaded  body  {  
        font-­‐family:  Raleway,  sans-­‐serif;  
     }
     ‑
     

     View Slide

168. View Slide

169. FONT REQUEST
     

     View Slide

170. FONT REQUEST
     A Font  
     starts  
     loading
     

     View Slide

171. FONT REQUEST
     Font  
     finishes  
     loading
     B
     A Font  
     starts  
     loading
     

     View Slide

172. FONT REQUEST
     REPAINT
     Font  
     finishes  
     loading
     B
     A Font  
     starts  
     loading
     

     View Slide

173. FOUT
     RALEWAY
     font-­‐rendering:  block  0s;
     

     View Slide

174. FOUT
     @FONT-FACE LOAD
     font-­‐rendering:  block  0s;
     

     View Slide

175. FOUT
     FOIT
     N SECOND
     TIMEOUT
     N  >  0
     

     View Slide

176. var  docEl  =  document.documentElement;  
     docEl.className  +=  "  raleway-­‐loading";  
     window.setTimeout(function()  {  
        docEl.className  +=  "  raleway-­‐fallback";  
     },  1000);  
     document.fonts.load("1em  Raleway").then(function()  {  
        docEl.className  +=  "  raleway-­‐loaded";  
     });  
     ‑
     

     View Slide

177. .raleway-­‐loading  body  {  
        color:  transparent;  
     }  
     .raleway-­‐fallback  body,  
     .raleway-­‐loaded  body  {  
        color:  inherit;  
     }  
     .raleway-­‐fallback  body  {  
        font-­‐family:  serif;  
     }  
     .raleway-­‐loaded  body  {  
        font-­‐family:  Raleway,  serif;  
     }
     ‑
     

     View Slide

178. FOIT to FOUT, 1 second font-­‐rendering:  block  1s  
     swap  infinite;
     

     View Slide

179. 1 S
     FOIT to FOUT, 1 second font-­‐rendering:  block  1s  
     swap  infinite;
     RALEWAY
     

     View Slide

180. 1 S
     FOIT to FOUT, 1 second
     @FONT-FACE LOAD
     font-­‐rendering:  block  1s  
     swap  infinite;
     

     View Slide

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

     View Slide

182. ONE REPAINT
     TO RULE THEM ALL
     

     View Slide

183. 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
     

     View Slide

184. View Slide

185. FONT REQUESTS
     

     View Slide

186. FONT REQUESTS
     A Fonts  
     start  
     loading
     

     View Slide

187. FONT REQUESTS
     Fonts  
     finish  
     loading
     B
     A Fonts  
     start  
     loading
     

     View Slide

188. FONT REQUESTS
     REPAINT
     Fonts  
     finish  
     loading
     B
     A Fonts  
     start  
     loading
     

     View Slide

189. TWO REPAINTS
     TO RULE THEM ALL
     

     View Slide

190. View Slide

191. MOST  JARRING  
     REPAINT  FOR  ROMAN
     ROMAN
     

     View Slide

192. MOST  JARRING  
     REPAINT  FOR  ROMAN
     BOLD
     ITALIC
     BOLD  ITALIC
     ROMAN
     

     View Slide

193. MOST  JARRING  
     REPAINT  FOR  ROMAN
     BOLD
     ITALIC
     BOLD  ITALIC
     FAUX  
     VERSIONS
     ROMAN
     

     View Slide

194. MOST  JARRING  
     REPAINT  FOR  ROMAN
     BOLD
     ITALIC
     BOLD  ITALIC
     FAUX  
     VERSIONS
     FINAL  REPAINT
     ROMAN
     

     View Slide

195. ARIAL ARIAL BOLD
     

     View Slide

196. EXO EXO FAUX BOLD
     

     View Slide

197. EXO EXO BOLD
     

     View Slide

198. FLASH OF FAUX TEXT
     zachleat.com/web/foft/
     

     View Slide

199. MINIMIZE THE
     FALLBACK
     to
     WEBFONT
     REFLOW
     

     View Slide

200. font-­‐family
     FALLBACK STYLE
     

     View Slide

201. fontfamily.io
     

     View Slide

202. font-­‐family  
     FALLBACK STYLE
     

     View Slide

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

     View Slide

204. Web Font Tune-up Time:
     A Fun Font Fallback Event
     http://blog.fonts.com/2011/08/web-font-tune-up-
     time-a-fun-font-fallback-event/
     

     View Slide

205. THERE ARE A LOT OF TOOLS
     AT OUR DISPOSAL
     TO EASE THE TRANSITION
     FROM FALLBACK
     TO WEBFONT
     

     View Slide

206. View Slide

207. THE DEFAULT
     BROWSER BEHAVIOR
     FOR FONT-LOADING
     IS HARMFUL TO BOTH
     THE PERCEIVED PERFORMANCE
     AND INTEGRITY OF
     CONTENT ON THE WEB.
     

     View Slide

208. THE DEFAULT
     BROWSER BEHAVIOR
     FOR FONT-LOADING
     IS HARMFUL TO BOTH
     THE PERCEIVED PERFORMANCE
     AND INTEGRITY OF
     CONTENT ON THE WEB.
     FONT-LOADING
     INTEGRITY
     PERCEIVED PERFORMANCE
     

     View Slide

209. USE A
     FONT LOADING
     STRATEGY.
     

     View Slide

210. DON’t ACCEPT
     THE DEFAULTS.
     

     View Slide

211. @zachleat
     zachleat.com
     

     View Slide