Variable fonts — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 One file, every weight</h1>
    <p class="pg-sub">
      Drag the slider. The <strong>variable font</strong> renders the exact weight you ask for, live, from one file.
      The <strong>static setup</strong> below it can only ever show the handful of weights someone actually shipped —
      and every new one you add is another network request.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <label class="ctl-label" for="weight">Font weight — <span class="weight-readout" id="weightReadout">400</span></label>
        <input type="range" id="weight" min="100" max="900" step="1" value="400" />
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-weight="400">Regular · 400</button>
        <button class="btn sm" data-weight="600">Semibold · 600</button>
        <button class="btn sm" data-weight="700">Bold · 700</button>
        <button class="btn sm" data-weight="538">Odd value · 538</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>
      <p class="hint">
        The presets simulate a real design system: someone adds a weight the day a component needs it.
        Watch the request counter on the static side.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="sample-row">
        <div class="sample">
          <div class="sample-label">
            <span>Variable font — 1 file, any weight</span>
            <span class="pill good">requests: 1</span>
          </div>
          <div class="sample-text" id="varSample">The quick fox jumps.</div>
        </div>
        <div class="sample">
          <div class="sample-label">
            <span>Static files — one request per weight ever used</span>
            <span class="pill" id="reqPill">requests: <span class="req-counter" id="reqCount">1</span></span>
          </div>
          <div class="sample-text static-sample" id="staticSample">The quick fox jumps.</div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot good" id="dot"></span><span id="statusText">Drag the slider — the variable font follows exactly.</span>
      </div>
      <p class="hint" id="hint">
        The static sample snaps to the nearest weight someone has actually "shipped" so far (400, 600, 700, or 538 once you've
        clicked that preset) — because that's the only shape the font file for that weight actually contains.
      </p>
    </div>
  </div>

preview

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