Web Fonts Performance

Web fonts are great. They are also be really bad for 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 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. We’ll also take a look at what the future will bring to web font performance: preloading hints and the new font-display property.

Transcript

1. Web Fonts Performance @bram_stein
2. 60% use web fonts
3. 400kB of web fonts
4. 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
5. A
6. A
7. example.com A
8. 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
9. 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
10. B
11. B
12. example.com B
13. example.com Loading example.com B
14. 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
15. ?
16. A
17. A
18. example.com A
19. 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
20. 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
21. B
22. B
23. example.com B
24. example.com B
25. 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. ?
27. 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. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT
29. 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. FOUT is progressive enhancement
31. Flash Of Fallback Text
32. A web font is only downloaded when it is used in a CSS selector that matches a DOM connected node.
33. <p>Hello!</p> @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”); }
34. <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; }
35. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores
36. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores
37. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores
38. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B HTML
39. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS
40. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS
41. 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
42. 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
43. 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
44. 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
45. @font-face { font-family: Elena; src: url(elena.woff); font-display: auto|block|swap|fallback|optional; } CSS font-display
46. @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
47. 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; }
48. 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; }
49. 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; /* empty cache */ } 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
50. CSS font-display request page web fonts loaded @font-face { … font-display: optional; /* fonts in cache */ } 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
51. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS font loading starts web fonts are rendered
52. Compression WOFF + WOFF2
53. @font-face { font-family: My Family; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } Simplified @font-face
54. Subsetting
55. 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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
56. 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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
57. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS font loading starts web fonts are rendered
58. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B font loading starts web fonts are rendered
59. Lazy loading is bad (for web fonts)
60. Preload instructions
61. Preload <head> … <link rel=“preload” href=“elena.woff” as=“font” type=“font/woff”> </head> Link: <elena.woff>; rel=preload; as=font; type=‘font/woff’
62. Preload <head> … <link rel=“preload” href=“elena.woff” as=“font” type=“font/woff”> </head> Link: <elena.woff>; rel=preload; as=font; type=‘font/woff’
63. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Preload 400 MS HTML font loading starts CSS FONT A FONT B web fonts are rendered
64. 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
65. 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
66. No browser support? Use JavaScript.
67. CSS Font Loading API w3.org/TR/css-font-loading
68. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); elena.load().then(function () { // Elena has loaded. }); CSS Font Loading API
69. font loading patterns
70. grouping fonts
71. var normal = new FontFace(‘Output Sans’, …); var italic = new FontFace(‘Output Sans’, …); Promise.all([ normal.load(), italic.load() ]).then(function () { // Output Sans regular and italic loaded. });
72. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS NORMAL ITALIC Output Sans regular and italic loaded.
73. loading with timeout
74. function timer(time) { return new Promise(function (resolve, reject) { setTimeout(reject, time); }); }
75. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); Promise.race([ timer(300), elena.load() ]).then(function () { // Elena has loaded. }).catch(function () { // Elena failed to load or timed out. });
76. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS ELENA TIMER Elena has loaded.
77. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS ELENA Timeout TIMER
78. prioritised loading
79. var primary = new FontFace(‘Primary Font’, …); var secondary = new FontFace(‘Secondary Font’, …); primary.load().then(function () { // Primary font has loaded secondary.load().then(function () { // Secondary font has loaded }); });
80. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS PRIMARY SECONDARY Primary font has loaded. Secondary font has loaded.
81. font display
82. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); var html = document.documentElement; html.classList.add(‘fonts-loading’); elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); }).catch(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-failed’); });
83. body { font-family: sans-serif; } .fonts-loaded body { font-family: Elena, sans-serif; } font-display: swap
84. font-display: block .fonts-loading body { visibility: hidden; } .fonts-loaded body, .fonts-failed body { visibility: visible; }
85. optimising cached experience
86. Optimising cached experience … elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded = true; }).catch(function () { … });
87. if (sessionStorage.fontsloaded) { var html = document.documentElement; html.classList.add(‘fonts-loaded’); } Optimising cached experience
88. www.bramstein.com/writing/ web-font-loading-patterns.html
89. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No No No No Yes Yes No* Yes Yes CSS Font Loading API * In progress
90. Font Face Observer fontfaceobserver.com fontfaceobserver.com
91. var elena = new FontFaceObserver(‘Elena’, …); elena.load().then(function () { // font is loaded }); Font Face Observer
92. @font-face { font-family: Elena; src: url(elena.woff2) format(“woff2”), url(elena.woff) format(“woff”); } Font Face Observer
93. optimise start & load 1
94. font loading strategy 2
95. fonts are enhancement 3
96. Web Fonts Performance @bram_stein https://www.bramstein.com FF Enzo by Tobias Kvant Source Code Pro by Paul D. Hunt