font-display: swap — the layout shift it leaves behind

<div class="pg">
    <h1 class="pg-title">🎮 font-display: swap — the layout shift it leaves behind</h1>
    <p class="pg-sub">
      Swap in the "web font" and watch the paragraph's box change size. Drag the slider
      first — it stands in for <code>size-adjust</code> / <code>ascent-override</code>,
      the CSS that makes the swap invisible instead of a jump.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <label class="ctl-label" for="tune">Fallback metric match: <span id="tuneVal">0%</span></label>
        <input type="range" id="tune" min="0" max="100" value="0" />
      </div>
      <p class="hint">
        0% = the browser's raw fallback font, untouched. 100% = a fallback tuned with
        <code>size-adjust</code> / <code>ascent-override</code> so closely that it
        already occupies the web font's box before the web font even arrives.
      </p>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn primary" id="swap">Swap in the web font</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="0">Typical (untuned fallback)</button>
        <button class="btn sm" data-preset="100">Tuned with size-adjust</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="stage" id="stage">
        <p class="demo-text" id="text">
          Setting font-display to swap kills the flash of invisible text, so most teams
          call the font-loading problem solved and move on to the next ticket in the
          sprint without a second look at what happens next.
        </p>
      </div>
      <div class="below" id="below">⬇ next element on the page (a button, a card, whatever comes after)</div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Drag the slider, then click "Swap in the web font."</span>
      </div>
      <p class="hint" id="hint">
        Caption: the page swaps between your browser's built-in sans-serif and serif
        fonts at the same declared size — same CSS, different rendered height, because
        the glyphs are different widths. That's the real mechanism that trips Cumulative
        Layout Shift when a web font finishes loading over a fallback.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What the slider maps to in real CSS</div>
      <pre class="code"><span class="tok-kw">@font-face</span> {
  font-family: <span class="tok-str">"Brand Sans Fallback"</span>;
  src: local(<span class="tok-str">"Arial"</span>);
  <span class="tok-prop">size-adjust</span>: <span class="tok-num">104%</span>;
  <span class="tok-prop">ascent-override</span>: <span class="tok-num">92%</span>;
  <span class="tok-prop">descent-override</span>: <span class="tok-num">24%</span>;
  <span class="tok-prop">line-gap-override</span>: <span class="tok-num">0%</span>;
}</pre>
      <p class="hint">
        Those four numbers are exactly what the slider simulates. In production you don't
        guess them by hand — tools like Capsize, or the automatic fallback generation in
        <code>next/font</code>, compute them from the real font files.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.