WEBVTT

1
00:00:01.200 --> 00:00:04.031
A web page arrives with its words.

2
00:00:04.056 --> 00:00:08.512
The HTML has every letter of every paragraph.

3
00:00:08.723 --> 00:00:16.314
Yet on this slow connection, the page shows only empty space where the text should be.

4
00:00:16.514 --> 00:00:18.242
The words are there.

5
00:00:18.325 --> 00:00:23.896
What's missing is the font: the file that describes what each letter looks like.

6
00:00:24.037 --> 00:00:28.679
Until it arrives, the browser has to decide what to do.

7
00:00:28.983 --> 00:00:36.180
As a developer, you can make that decision for it, and leaving it to chance can be catastrophic.

8
00:00:36.380 --> 00:00:46.026
In the worst case, the font sits in what we call the critical rendering path: nothing on the page is drawn until it arrives.

9
00:00:46.423 --> 00:00:50.682
UC San Diego's own home page shows the problem.

10
00:00:50.823 --> 00:01:04.265
Its fonts are packed into a style sheet of more than two megabytes, which has to arrive before anything can be drawn, and which is downloaded again, in full, on every visit.

11
00:01:04.965 --> 00:01:08.051
Fonts are found late, by design.

12
00:01:08.355 --> 00:01:12.742
The browser reads the HTML, which names a style sheet.

13
00:01:12.883 --> 00:01:16.411
It fetches the style sheet, which declares a font.

14
00:01:16.436 --> 00:01:18.558
But it doesn't fetch the font yet.

15
00:01:18.769 --> 00:01:24.317
It waits until it lays out the page and finds text that actually uses it.

16
00:01:24.458 --> 00:01:27.881
Only then does the request begin.

17
00:01:28.081 --> 00:01:29.391
That's sensible.

18
00:01:29.532 --> 00:01:36.879
A site might declare eight faces and use three on a given page, so why download the other five?

19
00:01:37.021 --> 00:01:40.084
But it puts the font at the back of the line.

20
00:01:40.284 --> 00:01:44.125
A preload link in the head moves it to the front.

21
00:01:44.522 --> 00:01:54.516
While the browser is still reading the HTML, it learns that this font will be needed, and fetches it alongside the CSS.

22
00:01:54.716 --> 00:02:06.440
Preload only the most important font or fonts because if you preload everything, then you might create an experience worse than doing nothing.

23
00:02:07.140 --> 00:02:10.714
So what does the browser draw while it waits?

24
00:02:10.995 --> 00:02:14.998
The CSS specification describes three stages.

25
00:02:15.197 --> 00:02:20.292
First, during the block period, the text is drawn, but invisibly.

26
00:02:20.480 --> 00:02:28.361
Second, in the swap period, it's drawn in the fallback font, and swapped when the real one arrives.

27
00:02:28.665 --> 00:02:36.140
Last comes the failure period: if the font still hasn't arrived, the fallback stays for good.

28
00:02:36.340 --> 00:02:43.664
The font-display setting, inside the at font face rule, sets how long each period lasts.

29
00:02:43.794 --> 00:02:47.751
Block: hide the text for about three seconds.

30
00:02:47.880 --> 00:02:56.841
Swap: hide it for a tenth of a second at most, then show a fallback, and change it whenever the font is loaded.

31
00:02:57.042 --> 00:03:03.855
Fallback: the same tiny wait, but stop swapping after about three seconds.

32
00:03:03.938 --> 00:03:09.730
And optional: use the font only if it's ready for the first paint.

33
00:03:10.034 --> 00:03:13.039
Otherwise, keep the fallback.

34
00:03:13.238 --> 00:03:16.615
Now watch a font that arrives at two seconds.

35
00:03:16.628 --> 00:03:19.831
Block shows nothing at all, then the font.

36
00:03:19.960 --> 00:03:23.592
Swap shows a fallback at once, then changes.

37
00:03:23.791 --> 00:03:28.851
Fallback does the same, because two seconds is inside its window.

38
00:03:28.981 --> 00:03:31.115
Optional never changes.

39
00:03:31.256 --> 00:03:38.894
This visit stays in the fallback, and the next one, with the font already cached, gets it from the start.

40
00:03:39.094 --> 00:03:41.077
Both failures have names.

41
00:03:41.161 --> 00:03:44.293
Hidden text is the flash of invisible text.

42
00:03:44.377 --> 00:03:47.509
The change is the flash of unstyled text.

43
00:03:47.593 --> 00:03:49.913
One costs reading time.

44
00:03:49.996 --> 00:03:53.187
The other costs a display jolt.

45
00:03:53.387 --> 00:03:59.655
The specification's advice for long text is fallback or optional, not swap.

46
00:03:59.958 --> 00:04:10.127
A reader halfway through a paragraph is better served by a font that never arrives than by one that arrives and disrupts their experience.

47
00:04:10.827 --> 00:04:13.077
Here's what we mean by the text jolt.

48
00:04:13.091 --> 00:04:16.572
A paragraph in Arial while Inter loads.

49
00:04:16.644 --> 00:04:22.981
Inter is a little wider, so when it arrives the lines break in different places.

50
00:04:23.110 --> 00:04:29.622
The paragraph grows by a line, and everything below it moves thirty pixels down.

51
00:04:30.018 --> 00:04:33.465
If you were reading, you've lost your place.

52
00:04:33.664 --> 00:04:46.781
That movement counts as layout shift: the Web Vital called Cumulative Layout Shift, or C L S, the same one images cause when they arrive without a width and height.

53
00:04:46.982 --> 00:04:50.893
The fix is to make the fallback the same size as the font.

54
00:04:51.196 --> 00:04:59.507
CSS can take Arial, scale it up by about six percent, and give it Inter's height above and below the baseline.

55
00:04:59.811 --> 00:05:06.276
Now, when Inter arrives, the letters change shape, but every line keeps its length.

56
00:05:06.580 --> 00:05:08.970
Zero pixels.

57
00:05:09.169 --> 00:05:15.065
You don't have to do that calculation by hand: tools read it from the font files.

58
00:05:15.206 --> 00:05:23.633
And a numeric line height, such as one point five, keeps every line the same height in any font.

59
00:05:24.333 --> 00:05:31.553
Everything so far happens on the first visit, and if we cache properly, it won't happen again.

60
00:05:31.753 --> 00:05:38.949
This course's own fonts, IBM Plex, cost about four hundred kilobytes on a first visit.

61
00:05:39.346 --> 00:05:45.625
But they live in a folder named for their release, so a file at that address never changes.

62
00:05:45.766 --> 00:05:51.604
That lets the server say: keep these for a year, and don't even ask.

63
00:05:51.804 --> 00:05:57.886
So on the next page, and the next visit, there is no request for a font at all.

64
00:05:58.189 --> 00:05:59.918
The wait happened once.

65
00:05:59.943 --> 00:06:07.975
This is just the course's Performance Law: send less data, less often, from nearby, and only when needed.

66
00:06:08.186 --> 00:06:12.039
We fetched the font early in the first visit, and kept it.

67
00:06:12.342 --> 00:06:21.779
And serving it from a content delivery network, as this site does, brings even that first download closer to the reader.

68
00:06:22.479 --> 00:06:26.761
So when a web font loads, four decisions are yours.

69
00:06:26.902 --> 00:06:32.137
Put it at the front of the line with a preload, if the first screen needs it.

70
00:06:32.533 --> 00:06:38.986
Choose what readers see while they wait, with fallback or optional for long text.

71
00:06:39.197 --> 00:06:42.179
Size the fallback so nothing jumps.

72
00:06:42.262 --> 00:06:47.996
And finally cache the font, so the wait happens only once.

73
00:06:48.196 --> 00:06:56.669
Open the loading lab, set the delay to five seconds, and watch all five choices play out side by side.