Fontastic web performance

Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.

Transcript

1. WEB PERFORMANCE FONTASTIC
2. @notwaldorf
3. of websites use web fonts 68%
8. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
9. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://font.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
10. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://font.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; } div { font-family: Roboto, sans-serif; }
11. THE MITT ROMNEY WEB FONT PROBLEM /ZACH LEATHERMAN “
14. FOUT I
15. FOUT FOUT I
16. THE BROWSER HAS A TON OF OPINIONS
17. THE BROWSER HAS A TON OF OPINIONS ESPECIALLY ABOUT FONTS
18. index.html
19. index.html
22. <link rel="stylesheet" href=“https://fonts.googleapis.com/css?family…”>
23. …/css?family=Roboto:400
24. …/css?family=Roboto:400 @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format('woff2'); }
27. div { font-family: Roboto, sans-serif; }
28. @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format('woff2'); }
29. div { font-family: Roboto, sans-serif; } Do I HAVE Roboto YET?
30. div { font-family: Roboto, sans-serif; } RENDER
31. div { font-family: Roboto, sans-serif; } RENDER BLOCK
32. div { font-family: Roboto, sans-serif; } RENDER BLOCK Do I HAVE Roboto YET?
33. div { font-family: Roboto, sans-serif; } RENDER BLOCK
34. div { font-family: Roboto, sans-serif; } RENDER BLOCK SWAP
35. div { font-family: Roboto, sans-serif; } RENDER BLOCK SWAP Do I HAVE Roboto YET?
36. div { font-family: Roboto, sans-serif; } RENDER BLOCK SWAP
37. div { font-family: Roboto, sans-serif; } RENDER BLOCK SWAP FAIL
38. WHICH LOOKS LIKE THIS
41. FOIT BLOCK
42. FOIT FOUT BLOCK SWAP
43. AMAZING. now what.
44. FOIT IS WAAAY WORSE THAN FOUT
45. MINIMIZE FOIT YOU COULD JUST... NOT... USE WEBFONTS
46. MINIMIZE FOIT SHAKE IT OFF
47. MINIMIZE FOIT DOWNLOAD FEWER THINGS
48. MINIMIZE FOIT DOWNLOAD FEWER THINGS @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format(‘woff2'); }
49. MINIMIZE FOIT DOWNLOAD EVEN FEWER THINGS
50. MINIMIZE FOIT DOWNLOAD EVEN FEWER THINGS @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format('woff2'); unicode-range: U+0-A0; }
51. MINIMIZE FOIT DOWNLOAD EVEN FEWER THINGS EARLIER
52. MINIMIZE FOIT @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format(‘woff2'); } DOWNLOAD EVEN FEWER THINGS EARLIER
53. MINIMIZE FOIT @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format(‘woff2'); } <link rel=“preload" href=“https://font.woff2” as="font" type="font/woff2" crossorigin> DOWNLOAD EVEN FEWER THINGS EARLIER
54. MINIMIZE FOIT FONT FACE OBSERVER
55. MINIMIZE FOIT FONT FACE OBSERVER body { font-family: 'Roboto', sans-serif; }
56. MINIMIZE FOIT FONT FACE OBSERVER body.fonts-loaded { font-family: 'Roboto', sans-serif; } body { font-family: sans-serif; }
57. MINIMIZE FOIT FONT FACE OBSERVER var font = new FontFaceObserver('Roboto'); font.load().then(function () { });
58. MINIMIZE FOIT FONT FACE OBSERVER var font = new FontFaceObserver('Roboto'); font.load().then(function () { document.body.classList.add(‘fonts-loaded'); });
59. MINIMIZE FOIT CONTROL THE BLOCK/SWAP PERIOD
60. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL
61. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL
62. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format(‘woff2’); }
63. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'), url(https://font.woff2) format(‘woff2’); font-display: optional; }
64. INVISIBLE BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
65. FALLBACK INVISIBLE BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
66. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
67. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
68. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
69. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms
70. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms 3S
71. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms 3S
72. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms 3S
73. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms 3S
74. FALLBACK INVISIBLE WEBFONT BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms 3S
75. https://font-display.glitch.me
76. MINIMIZE FOIT ✅
77. MINIMIZE FOIT ✅ MINIMIZE FOUT
78. MINIMIZE FOUT BE LESS JARRING
81. https://meowni.ca/font-style-matcher
82. FUNSIES WITH web fonts BONUS
83. ICON FONTS
86. MAKE YOUR OWN!
87. MAKE YOUR OWN! STEP 1: DRAW SOME THINGS
88. MAKE YOUR OWN! STEP 2: THERE IS NO STEP 2
89. http://fontastic.me
91. COLOUR FONTS?
92. https://typewithpride.COM
94. VARIABLE FONTS
95. VARIABLE FONTS BASICALLY SORCERY
98. div { font-family: 'AmstelvarAlpha Default'; font-size: 192px; font-variation-settings: 'wght' 98.4113, 'wdth' 402; }
99. https://AXIS-PRAXIS.org
100. https://AXIS-PRAXIS.org
101. div { font-family: ''Buffalo Gals Regular''; font-size: 192px; font-variation-settings: 'CK ' -1, 'FR ' -0.929784, 'HV ' -1, 'CN ' -0.902336, ‘BR ' 0.549087, 'TC ' 0; }
102. https://AXIS-PRAXIS.org
103. / bram stein - webfoNt handbook / helen holmes - type is your right / JAKE ARCHIBALD - minimising-font-downloads / every zach Leatherman BLOG post ever
104. THANKS! Noun Project: Smile by Clara Joy, Tubby Cat by Lauren Manninen, Exclamation by Kevin, Wink, Balloon, Microphone by Julien Deveaux, Ghost by Ted Meltok, Crazy Happy Creature by Tawny Whatmore, Cloud by Viraj, Web Page by Rajakumara, Settings by Akriti Bhusal, Dead cat by Erika Jasso, Wizard hat by Magicon, Rainbow by Grégory Montigny, Lettering by Carlo Pico, Icons by Setyo Ari Wibowo