Web Fonts Performance

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
September 14, 2015

Web Fonts Performance

Web fonts are great. They are also be really bad for front-end performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank page is no fun, especially when the content has already loaded.

This talk explores why browser have placed fonts on the critical path, and how we can work around this while still delivering a good user experience. It also takes a look at what the future will bring to web font performance: preloading hints, the font-display property, and HTTP/2.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

September 14, 2015
Tweet

Transcript

  1. 7.

    A web font is only downloaded when it is used

    in a CSS selector that matches a DOM connected node.
  2. 13.

    @font-face { font-family: Font A; src: url(fonta.woff); } @font-face {

    font-family: Font B; src: url(fontb.woff); } Font Loading
  3. 14.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B HTML
  4. 15.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS
  5. 16.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS
  6. 17.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B
  7. 18.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B font a is rendered CSS FONT B
  8. 19.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B web fonts are rendered CSS
  9. 20.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A web fonts are rendered FONT B CSS
  10. 22.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  11. 23.

    A

  12. 24.

    A

  13. 26.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Loading example.com A
  14. 27.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales A
  15. 28.

    B

  16. 29.

    B

  17. 32.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales B
  18. 33.

    ?

  19. 34.

    A

  20. 35.

    A

  21. 37.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A
  22. 38.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A
  23. 39.

    B

  24. 40.

    B

  25. 43.

    example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales B
  26. 44.

    ?

  27. 45.

    request content content loads web fonts load In olden times

    when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Flash Of Unstyled Text (FOUT) Flash Of Invisible Text (FOIT) request content content loads web fonts load
  28. 46.

    Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT
  29. 47.

    Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT 3 sec. 3 sec. ∞ 3 sec. n/a n/a n/a n/a FOUT versus FOIT
  30. 52.

    @font-face { … font-display: block; } CSS font-display In olden

    times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded
  31. 53.

    CSS font-display In olden times when wishing still helped one,

    there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: swap; }
  32. 54.

    CSS font-display In olden times when wishing still helped one,

    there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: fallback; /* load inside timeout */ }
  33. 55.

    CSS font-display request page start loading web fonts web fonts

    loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: fallback; /* load outside timeout */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  34. 56.

    CSS font-display request page start loading web fonts web fonts

    loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: optional; /* uncached */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  35. 57.

    CSS font-display request page web fonts loaded @font-face { …

    font-display: optional; /* cached */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  36. 60.

    .wf-loading { /* styles to use when web fonts are

    loading */ } .wf-active { /* styles to use when web fonts are active */ } .wf-inactive { /* styles to use when web fonts are inactive */ } Web Font Loader
  37. 65.

    IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No No No Yes No† No* Yes No CSS Font Loading API † In progress * Almost in progress
  38. 67.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts + fallback fonts render font events fire + web fonts render CSS
  39. 68.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  40. 72.

    A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  41. 73.

    A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  42. 74.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  43. 75.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  44. 76.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster
  45. 78.
  46. 79.
  47. 80.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster
  48. 81.

    Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~90ms faster
  49. 82.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  50. 83.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  51. 88.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  52. 89.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  53. 90.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render ~270ms faster CSS
  54. 92.

    IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No Yes Yes Yes Yes No Yes Yes Prefetch browser support
  55. 94.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  56. 95.

    IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No Yes† Yes Yes Yes No* Yes No HTTP/2 browser support † Only in Windows 10 * HTTP/2 support is coming in Safari 9 Warn that this should only be used for your most important content.
  57. 99.
  58. 101.

    @font-face { font-family: My Family; font-weight: 400; src: url(data:font/opentype;base64,d09GRgABA…); }

    @font-face { font-family: My Family; font-weight: 600; src: url(data:font/opentype;base64,d09GRgABA…); } … Inlining Fonts
  59. 102.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Inlining Fonts 400 MS HTML FONT A FONT B CSS FONT C
  60. 103.

    100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Inlining Fonts 400 MS HTML FONT A + FONT B + FONT C FONT B CSS FONT C
  61. 105.

    Downsides • Breaks parallel downloads • Only supports a single

    font format • No progressive rendering • Caching
  62. 107.

    if (localStorage.fonts) { insertStylesheet(localStorage.fonts); } else { var request =

    new XMLHttpRequest(); request.open(‘GET’, ‘myfonts.css’); request.onload = function () { var fonts = request.responseText; localStorage.fonts = fonts; insertStylesheet(fonts); }; request.send(); }
  63. 108.

    Benefits • Fonts are requested once • Avoids lazy loading

    • Avoids FOUT/FOIT in most browsers • Optimises for frequent visitors
  64. 109.

    Downsides • Same downsides as inlining • Pollutes localStorage of

    casual visitors • Custom cache mechanism • Licensing
  65. 111.

    @font-face { font-family: My Family; font-weight: 400; src: url(myfamily.woff2) format(“woff2”),

    url(myfamily.woff) format(“woff”); } body { font-family: sans-serif; } .fonts-loaded body { font-family: My Family, sans-serif; }
  66. 112.

    <script> (function(){'use strict';function h(a){document.body?… </script> <script> var myfamily = new

    FontFaceObserver(‘My Family’); myfamily.check().then(function () { var html = document.documentElement; html.classList.add(‘fonts-loaded’); }); </script>
  67. 113.

    Benefits • Fonts load as soon as possible • Consistent

    FOUT in all browsers • Re-use the browser cache • Support multiple formats • Fonts are downloaded in parallel
  68. 115.

    <script> var myfamily = new FontFaceObserver(‘My Family’); myfamily.check().then(function () {

    var html = document.documentElement; html.classList.add(‘fonts-loaded’); sessionStorage.fontsloaded = true; }); </script>