-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
348 lines (274 loc) · 14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fonts loading strategy</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Fonts loading strategies</h1>
<img src="./img/googlefonts.jpg" style="border: none; box-shadow: none;">
</section>
<section>
<h2>FOIT</h2>
<p>Flash of Invisible Text</p>
<img src="./img/foit.gif" style="border: none; box-shadow: none;">
</section>
<section>
<h2>FOUT</h2>
<p>Flash of Unstyled Text</p>
<img src="./img/fout.gif" style="border: none; box-shadow: none;">
</section>
<!-- <section data-background-iframe="https://zachleat.com/foitfout/" data-background-interactive>
<div
style="position: absolute; width: 30%; right: 0; top: -100px; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
<h2 style="color: #fff;"><b>demo</b>: FOIT and FOUT comparison</h2>
</div>
</section> -->
<!-- <section>
<h2>FOIT vs. FOUT ?</h2>
<a href="https://zachleat.com/foitfout/"><b>demo</b>: FOIT and FOUT comparison</a>
</section>
-->
<!-- <section>
<h2>FOFT</h2>
<p>Flash of Faux Text</p>
<img src="./img/font-synthesis.png" style="border: none; box-shadow: none;">
</section> -->
<section>
<h1>Strategies</h1>
</section>
<section>
<h2>Just use system fonts 🤔</h2>
<p style="color: #666; font-size: 34px;">instead of the custom fonts</p>
<pre><code class="css" data-trim>
font-family:
-apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif;
</code></pre>
</section>
<section>
<h2>System fonts<br>on different OS</h2>
<img src="./img/system-fonts.png" style="border: none; box-shadow: none;">
</section>
<section>
<h2>System fonts: pros and cons</h2>
<p style="font-size: 36px; text-align: left;">👍 Super simple: just use <code>font-family</code> without <code>@font-face</code>.</p>
<p style="font-size: 36px; text-align: left;">👍 Perfect rendering performance: no worries about FOUT/FOIT.</p>
<hr>
<p style="font-size: 36px; text-align: left;">👎 Limited availability. Very few system fonts are available cross platform.</p>
</section>
<section>
<h2>Unceremonious <code>@font-face</code></h2>
<p style="color: #666; font-size: 30px; letter-spacing: 0.2px;">Just add a naked CSS <code>@font-face</code> block with links to your file fonts</p>
<pre><code class="css" data-trim>
@font-face {
font-family: FontName;
src: url('fontname.woff2') format('woff2'),
url('fontname.woff') format('woff');
}
</code></pre>
</section>
<section>
<h2>Unceremonious <code>@font-face</code>: pros and cons</h2>
<p style="font-size: 36px; text-align: left;">👍 Good rendering performance in IE and Edge: <b>no FOIT</b></p>
<hr>
<p style="font-size: 36px; text-align: left;">👎 Bad rendering performance <b>everywhere else</b>: maximum 3 second FOIT in most modern browsers (and switches to FOUT if load takes longer)</p>
</section>
<section>
<h2><span style="font-size: 55px; display: inline-block; margin-bottom: 30px;">🐢🐇</span><br>MAKE FONT FILES SMALLER</h2>
<p style="color: #666; font-size: 34px;">Reduce webfont load time</p>
</section>
<section>
<h3><em>Strategy:</em> Use WOFF2 and WOFF formats</h3>
<p style="color: #666; font-size: 34px;">WOFF = Web Open Font Format</p>
</section>
<section>
<img src="./img/woff.png" style="border: none; box-shadow: none;" height="300">
<img src="./img/woff2.png" style="border: none; box-shadow: none;" height="300">
</section>
<section>
<h3><em>Strategy:</em> Subset your fonts</h3>
<p style="color: #666; font-size: 30px;">(if language and licensing requirements allow)</p>
<ul style="line-height: 140%; font-size: 34px; list-style-type: square;">
<li>Use only the <b>fonts</b> you actually need</li>
<li>You can also only load the <b>symbols</b> you need (for example, only symbols of one specific language)</li>
</ul>
</section>
<section>
<h3>Fonts Subsetting: example</h3>
<img src="./img/subsetting.jpg" style="border: none; box-shadow: none;" height="460">
</section>
<section>
<h2><span style="font-size: 55px; display: inline-block; margin-bottom: 30px;">🚦</span><br> START IMPORTANT<br>FONT DOWNLOADS EARLIER</h2>
</section>
<section>
<h2><em>Strategy:</em> Use <code>preload</code></h2>
<p style="color: #666; font-size: 34px;">Add <code class="css"><link rel="preload"></code><br>to fetch your font sooner:</p>
<pre><code>
<link rel="preload" href="font.woff2"
as="font"
type="font/woff2">
</code></pre>
</section>
<section>
<h2><code>preload</code>: pros and cons</h2>
<p style="font-size: 36px; text-align: left;">👍 Super easy</p>
<p style="font-size: 36px; text-align: left;">👍 Better rendering performance than just a <code>@font-face</code> block. Webfonts are requested higher up in the waterfall.</p>
<hr>
<p style="font-size: 36px; text-align: left;">👎 Not sufficient by itself.</p>
</section>
<section>
<h2><span style="font-size: 55px;">🚀</span><br>PRIORITIZE READABLE TEXT</h2>
<p style="color: #666; font-size: 34px;">Control the behavior while a webfont is loading:<b> NO invisible text</b></p>
</section>
<section>
<h3><em>Strategy:</em> Use <code>font-display</code></h3>
<p style="color: #666; font-size: 25px;"><code>font-display</code> currently supports the following range of
values:<br><code>auto | block | swap | fallback | optional</code></p>
<p style="font-size: 25px;">Add <code style="font-weight: bold;">font-display: swap</code> to switch to FOUT on
browsers that support it:</p>
<pre><code class="css" data-trim data-line-numbers="4-5">
@font-face {
font-family: FontName;
/* Define how the browser behaves during download: */
font-display: swap;
src: url(FontName.woff2) format('woff2');
}
</code></pre>
</section>
<!-- <section>
<h2><code>font-display</code></h2>
<img src="./img/font-display-2.png" style="border: none; box-shadow: none;">
</section>
-->
<!-- <section>
<h2><code>font-display</code></h2>
<img src="./img/font-display-3.png" style="border: none; box-shadow: none;" height="500">
</section>
-->
<!-- <section>
<h3>Good news: Google Fonts<br>added <code>font-display</code> 🎉</h3>
<p style="font-size: 25px;">Since May 2019 you can use <code style="font-weight: bold;">font-display: swap</code> with
Google Fonts:</p>
<pre><code class="html" style="font-size: 20px;" data-trim>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
</code></pre>
<p style="color: #666; font-size: 25px;">* note that URL parameter is named <code
style="font-weight: bold;">display</code></p>
</section> -->
<section>
<h3><code>font-display</code>: browser support</h3>
<img src="./img/font-display.png" style="border: none; box-shadow: none;">
</section>
<section>
<h2><code>font-display</code>: pros and cons</h2>
<p style="font-size: 36px; text-align: left;">👍 very simple and gives us FOUT without any JavaScript</p>
<p style="font-size: 36px; text-align: left;">👍 future friendly</p>
<hr>
<p style="font-size: 36px; text-align: left;">👎 still not very good browser support</p>
</section>
<!-- -->
<section>
<h3><em>Strategy:</em> Use the<br>CSS Font Loading API</h3>
<img src="./img/FLAPI.png" style="border: none; box-shadow: none; margin-top: 0; margin-bottom: 0; height: 230px;">
<img src="./img/FLAPI2.png" style="border: none; box-shadow: none; margin-top: 0; height: 230px;">
</section>
<section>
<h3>CSS Font Loading API</h3>
<p style="font-size: 36px; text-align: left;">👍 Protects from FOIT</p>
<p style="font-size: 36px; text-align: left;">👍Easy to group requests into a single repaint (just use one class for multiple web font loads)</p>
<hr>
<p style="font-size: 36px; text-align: left;">👎 Needs strict control. A single use of a <code>font-family</code> without the <code>loaded</code> class will likely trigger a FOIT.</p>
</section>
<section>
<h3>CSS Font Loading API polyfill:<br>Font Face Observer</h3>
<p style="color: #666; font-size: 34px;">The principle is the same:</p>
<pre><code class="js">
var font = new FontFaceObserver('YourFontName');
font.load().then(function () {
console.log('YourFontName has loaded.');
});
</code></pre>
<p style="color: #666; font-size: 30px;"><a href="https://fontfaceobserver.com/">https://fontfaceobserver.com/</a></p>
</section>
<section>
<h3><em>Strategy:</em> FOFT (Flash of faux text)</h3>
<img src="./img/font-synthesis.png" style="border: none; box-shadow: none;">
</section>
<!-- -->
<!-- <section>
<h2><span style="font-size: 55px; display: inline-block; margin-bottom: 30px;">🏁</span><br> REDUCE MOVEMENT<br>DURING PAGE LOAD</h2>
<p style="color: #666; font-size: 34px;">Control behavior after a web font has loaded</p>
</section>
<section>
<h3><em>Strategy:</em> Use the<br>CSS Font Loading API</h3>
<p style="color: #666; font-size: 34px;">When using 2+ web fonts for a single font-family,<br>group the repaints together.</p>
</section> -->
<!-- -->
<section>
<h2>Optimal (and simple) solution 👌</h2>
<ul style="line-height: 160%; font-size: 36px; list-style-type: square;">
<li>Download the fonts as WOFF2 and WOFF</li>
<li>Add <code class="css"><link rel="preload"></code></li>
<li>Add <code class="css">@font-face</code> declaration with <code class="css">font-display: swap;</code></li>
<li>Use <code class="css">font-family</code> normally in rest of document</li>
</ul>
<p style="color: #999; font-size: 25px; margin-top: 30px;">* More advanced (not CSS-only) solution: use the CSS Font Loading API with the polyfill</p>
</section>
<section>
<h2>Links</h2>
<ul style="line-height: 140%; font-size: 36px; list-style-type: square;">
<li style="margin-bottom: 20px;"><a href="https://www.zachleat.com/web/comprehensive-webfonts/">A comprehensive guide to font loading strategies</a><br>by Zach Leatherman</li>
<li style="margin-bottom: 20px;"><a href="https://www.bramstein.com/writing/web-font-loading-patterns.html">Web Font Loading Patterns</a><br>by Brem Stein — with examples of Font Face Observer usage</li>
<li><a href="https://www.youtube.com/watch?v=4m0OEPOfxUU">Web Fonts are ▢▢▢ Rocket Science</a><br>talk by Zach Leatherman</li>
</ul>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>