# What Happens When a Web Font Loads — narration script Runtime 7:01. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode. ## 0:00 · Text with nothing to draw - `0:01` A web page arrives with its words. The HTML has every letter of every paragraph. Yet on this slow connection, the page shows only empty space where the text should be. - `0:16` The words are there. What's missing is the font: the file that describes what each letter looks like. Until it arrives, the browser has to decide what to do. As a developer, you can make that decision for it, and leaving it to chance can be catastrophic. - `0:36` In the worst case, the font sits in what we call the critical rendering path: nothing on the page is drawn until it arrives. UC San Diego's own home page shows the problem. 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. ## 1:04 · Found last - `1:04` Fonts are found late, by design. The browser reads the HTML, which names a style sheet. It fetches the style sheet, which declares a font. But it doesn't fetch the font yet. It waits until it lays out the page and finds text that actually uses it. Only then does the request begin. - `1:28` That's sensible. A site might declare eight faces and use three on a given page, so why download the other five? But it puts the font at the back of the line. - `1:40` A preload link in the head moves it to the front. While the browser is still reading the HTML, it learns that this font will be needed, and fetches it alongside the CSS. - `1:54` Preload only the most important font or fonts because if you preload everything, then you might create an experience worse than doing nothing. ## 2:06 · Hide, show, or swap - `2:07` So what does the browser draw while it waits? The CSS specification describes three stages. First, during the block period, the text is drawn, but invisibly. Second, in the swap period, it's drawn in the fallback font, and swapped when the real one arrives. Last comes the failure period: if the font still hasn't arrived, the fallback stays for good. - `2:36` The font-display setting, inside the at font face rule, sets how long each period lasts. Block: hide the text for about three seconds. Swap: hide it for a tenth of a second at most, then show a fallback, and change it whenever the font is loaded. - `2:57` Fallback: the same tiny wait, but stop swapping after about three seconds. And optional: use the font only if it's ready for the first paint. Otherwise, keep the fallback. - `3:13` Now watch a font that arrives at two seconds. Block shows nothing at all, then the font. Swap shows a fallback at once, then changes. Fallback does the same, because two seconds is inside its window. Optional never changes. This visit stays in the fallback, and the next one, with the font already cached, gets it from the start. - `3:39` Both failures have names. Hidden text is the flash of invisible text. The change is the flash of unstyled text. One costs reading time. The other costs a display jolt. - `3:53` The specification's advice for long text is fallback or optional, not swap. A reader halfway through a paragraph is better served by a font that never arrives than by one that arrives and disrupts their experience. ## 4:10 · The jump - `4:10` Here's what we mean by the text jolt. A paragraph in Arial while Inter loads. Inter is a little wider, so when it arrives the lines break in different places. The paragraph grows by a line, and everything below it moves thirty pixels down. If you were reading, you've lost your place. - `4:33` 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. - `4:46` The fix is to make the fallback the same size as the font. CSS can take Arial, scale it up by about six percent, and give it Inter's height above and below the baseline. Now, when Inter arrives, the letters change shape, but every line keeps its length. Zero pixels. - `5:09` You don't have to do that calculation by hand: tools read it from the font files. And a numeric line height, such as one point five, keeps every line the same height in any font. ## 5:23 · The second visit - `5:24` Everything so far happens on the first visit, and if we cache properly, it won't happen again. - `5:31` This course's own fonts, IBM Plex, cost about four hundred kilobytes on a first visit. But they live in a folder named for their release, so a file at that address never changes. That lets the server say: keep these for a year, and don't even ask. - `5:51` So on the next page, and the next visit, there is no request for a font at all. The wait happened once. This is just the course's Performance Law: send less data, less often, from nearby, and only when needed. We fetched the font early in the first visit, and kept it. And serving it from a content delivery network, as this site does, brings even that first download closer to the reader. ## 6:21 · Four decisions - `6:22` So when a web font loads, four decisions are yours. Put it at the front of the line with a preload, if the first screen needs it. Choose what readers see while they wait, with fallback or optional for long text. Size the fallback so nothing jumps. And finally cache the font, so the wait happens only once. - `6:48` Open the loading lab, set the delay to five seconds, and watch all five choices play out side by side.