$30 off During Our Annual Pro Sale. View Details »

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

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

zachleat

May 28, 2015
Tweet

More Decks by zachleat

Other Decks in Programming

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