Web Fonts Performance

Transcript

1. Web Fonts Performance @bram_stein

2. 25% 50% 75% 2012 2013 2014 2015 Web Font Usage

   Source: HTTP Archive

3. 1 2 3 2012 2013 2014 2015 Font Requests Source:

   HTTP Archive

4. 30kB 60kB 90kB 120kB 2012 2013 2014 2015 Font Size

   Source: HTTP Archive

5. 300kB of web fonts (2.8 × 107kB)

6. @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”); }

7. A web font is only downloaded when it is used

   in a CSS selector that matches a DOM connected node.

8. <p>Hello!</p> @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”);

   }

9. <p>Hello!</p> @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”);

   } p { font-family: Elena, Georgia, serif; }

10. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores

11. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores

12. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores

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

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

14. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B HTML

15. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS

16. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS

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

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

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

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

21. FOUT versus FOIT Flash Of (Unstyled|Invisible) Text

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

23. A

24. A

25. example.com A

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

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

28. B

29. B

30. example.com B

31. example.com Loading example.com B

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

33. ?

34. A

35. A

36. example.com A

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

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

39. B

40. B

41. example.com B

42. example.com B

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

44. ?

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

46. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT

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

48. FOUT is progressive enhancement

49. Flash Of Fallback Text (FOFT — for the acronym lovers)

50. CSS font-display (coming soon)

51. @font-face { font-family: My Font; src: url(myfont.woff); font-display: auto|block|swap|fallback|optional; }

    CSS font-display

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

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; }

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 */ }

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

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

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

58. No browser support? Use JavaScript.

59. Web Font Loader github.com/typekit/webfontloader

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

61. Font Face Observer github.com/bramstein/fontfaceobserver github.com/bramstein/fontfaceobserver

62. var elena = new FontFaceObserver(‘Elena’); elena.check().then(function () { // font

    is loaded }); Font Face Observer

63. CSS Font Loading API w3.org/TR/css-font-loading

64. var font = new FontFace(‘Elena’, ‘url(font.woff)’); font.load().then(function () { //

    font is loaded }); CSS Font Loading API

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

66. Dealing with the Flash

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

68. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B

69. Compression WOFF + WOFF2. Done.

70. @font-face { font-family: My Family; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”);

    } New bulletproof @font-face

71. Subsetting

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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

74. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B

75. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B

76. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster

77. Latency is the real performance killer

78. None
79. None

80. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster

81. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~90ms faster

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

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

84. Lazy loading is bad (For web fonts)

85. Preload instructions (Also coming soon)

86. <head> … <link rel=“preload” href=“font.woff” as=“font”> </head> Link: <font.woff>; rel=preload;

    as=font Preload

87. Preload <head> … <link rel=“preload” href=“font.woff” as=“font”> </head> Link: <font.woff>;

    rel=preload; as=font

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

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

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

91. <head> … <link rel=“prefetch” href=“font.woff”> </head> Link: <font.woff>; rel=prefetch Prefetch

92. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No Yes Yes Yes Yes No Yes Yes Prefetch browser support

93. HTTP/2 server push

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

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.

96. Critical CSS fonts

97. web font anti-patterns (it seemed like a good idea at

    the time…)

98. Using web fonts (for everything)

99. None

100. inlining fonts (OMG… it’s full of base64)

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

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

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

104. Benefits • Avoids HTTP overhead

105. Downsides • Breaks parallel downloads • Only supports a single

     font format • No progressive rendering • Caching

106. Reimplement caching (Guardian & Smashing Magazine)

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(); }

108. Benefits • Fonts are requested once • Avoids lazy loading

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

109. Downsides • Same downsides as inlining • Pollutes localStorage of

     casual visitors • Custom cache mechanism • Licensing

110. Keep it simple (but not stupid)

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; }

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>

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

114. Downsides • Requires a (little) bit of code • FOUT

     on each request

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>

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

     </script>

117. Downsides • Requires a (little) bit of code • FOUT

     on each request

118. font loading strategy 1

119. optimise start & load 2

120. fonts are enhancement 3

121. Web Fonts Performance @bram_stein https://www.bramstein.com FF Enzo by Tobias Kvant

     Source Code Pro by Paul D. Hunt