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.

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
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)
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