A webfont does not arrive instantly, and in the meantime the browser must do one of two things — hide the text, or show it in another face first. Neither is free. Hiding it gives your reader a blank area; showing it means the text changes the moment the font lands.
font-display is where you write that decision down.
Think of it as two periods
The wait divides into two periods.
During the block period, the browser does not paint the text. The space is reserved but nothing is visible. If the font arrives inside this window it is drawn correctly from the start and nothing ever changes on screen.
During the swap period, which follows, the browser paints using a fallback face. If the webfont arrives inside this window, it is swapped in — and since the glyph widths differ, the layout moves at that instant.
What the five values decide
All five values are just different lengths for those two periods.
swap chooses to eliminate blank text and accept one guaranteed change. block does the reverse: nothing changes, but the text is invisible for a while. optional is the most conservative — if the font misses a very short block period, this page view does not use it at all. The file still lands in the cache, so subsequent visits render with it from the first frame.
Why the choice matters more in Korean
As the previous part showed, a Korean font arrives as several chunks, each larger than a Latin file. So the wait is longer, and the pieces land separately. Both facts amplify the downside of each value.
With block, the empty stretch feels longer than it would on a Latin-only site. With swap, the text can change more than once as chunks arrive — the heading switching first, the body a moment later.
And that swap does more than change shapes. If the fallback and the webfont have different glyph widths, the line breaks move, and if a paragraph gains or loses a line, everything below it shifts. This is precisely how a button ends up moving out from under a finger that was about to tap it.
What to choose
The practical recommendation:
Use swap for body text, paired with the fallback metric overrides covered in the next part. Match the fallback’s widths and heights to the webfont and the swap no longer moves the layout — which removes the only real drawback of swap.
For a display heading that must show the brand face, preload just that chunk. Arriving sooner means arriving inside the block period, so no swap happens at all.
Where layout movement is genuinely unacceptable — checkout or application screens, where a mis-tap is expensive — optional is a reasonable call. You trade the brand face on a first visit for zero movement.
First paint and layout movement are treated together in the Performance archive, and the order in which we measure and fix these on a real site is published on our process page.
Next part
The fallback metric overrides promised twice now are next. A few lines of CSS remove the layout movement a font swap causes, and it is the most clearly effective technique in this series.