CSS @font-face Metric Overrides as a Consent Attack Toolkit

The problem they were designed to solve — and what that design enables

When a browser loads a page, it immediately lays out text using a fallback font (usually a system font like Arial or Georgia). When the declared web font finishes downloading, the browser substitutes it. If the web font has different vertical metrics than the fallback — a taller cap height, deeper descenders, wider line gaps — the substitution causes a visible layout shift. Elements jump. Lines reflow. This is measured as Cumulative Layout Shift (CLS) and negatively affects Core Web Vitals scores.

The CSS Fonts Working Group introduced four metric override descriptors to solve this: you can tell the browser to use the fallback font's metrics for the substituted web font, preventing the layout shift during font loading. The descriptors:

Each descriptor was built to solve a legitimate problem. Together, they give an attacker unprecedented control over how text is rendered — and critically, all of this control lives in the @font-face rule, below the CSS properties that most audit tools inspect.

Why line-height: normal is the critical prerequisite

The metric override descriptors only have their full effect when the element's line-height is computed from font metrics rather than a fixed value. If a consent element has an explicit line-height: 1.5, the browser multiplies the computed font-size (e.g., 16px) by 1.5 to get the line box height (24px) — regardless of what the font metrics say. The metric override descriptors have no effect on this calculation.

But when line-height: normal (the default for most elements that haven't been explicitly styled), the browser computes line box height from the font's actual metrics: ascent + descent + line-gap. This is where the metric overrides apply. An attacker setting descent-override: 400% on a consent element with line-height: normal expands each line box from approximately 22px to approximately 87px at a 16px base — a 4× expansion. A consent container sized at 192px (enough for ~8 normally-spaced lines) shows only 2 inflated lines, with the remaining 6 silently clipped by overflow: hidden.

/* line-height:normal is the prerequisite — metric overrides only affect
   line boxes when line height is derived from font metrics */

/* SAFE (from metric-override perspective): */
.consent-text {
  line-height: 1.5;  /* Fixed multiplier — metric overrides ignored */
  /* 1.5 × 16px = 24px line box regardless of @font-face metrics */
}

/* VULNERABLE: */
.consent-text {
  /* line-height: normal is the CSS initial value */
  /* Most consent text inherits line-height:normal unless explicitly set */
  /* Browser computes line box from: ascent + descent + line-gap */
  /* → Metric overrides in @font-face directly control line box height */
}

/* An MCP server that cannot add explicit CSS to the consent element
   can instead remove an explicit line-height value, reverting to
   line-height:normal — re-enabling the vulnerability. */

How getComputedStyle fails to detect the attack

The central reason metric override attacks are so difficult to detect via standard JavaScript inspection is that getComputedStyle reports the CSS properties — not the rendered font metrics. Consider this scenario:

• getComputedStyle(consentEl).fontSize → "16px" ✓
• getComputedStyle(consentEl).color → "rgb(26, 26, 26)" ✓
• getComputedStyle(consentEl).visibility → "visible" ✓
• getComputedStyle(consentEl).lineHeight → "normal" (this is the string "normal", not a computed pixel value)
• getComputedStyle(consentEl).fontFamily → "ConsentFont" (the family name — not the actual source file)

None of these values indicate anything wrong. The consent text appears intact at the DOM level. The CSS properties all look correct. But the rendered output may be showing 2.4px glyphs with 87px line boxes, clipping all but one line of the consent agreement.

The only properties that reveal the attack require combining CSS introspection with layout measurement:

/* getComputedStyle gives no signal about metric override attacks */

const el = document.querySelector('.consent-dialog');
const cs = getComputedStyle(el);

console.log(cs.fontSize);    // "16px"    — correct, size-adjust doesn't touch this
console.log(cs.lineHeight);  // "normal"  — this is a string, not a pixel value
console.log(cs.visibility);  // "visible" — correct

/* What DOES reveal the attack: */

/* 1. scrollHeight vs clientHeight */
console.log(el.scrollHeight > el.clientHeight);
// true if content is clipped by overflow:hidden
// Doesn't tell you WHY — could be metric overflow, too much text, etc.

/* 2. getBoundingClientRect() on individual elements vs expected height */
for (const line of el.querySelectorAll('p')) {
  const h = line.getBoundingClientRect().height;
  const fs = parseFloat(cs.fontSize);
  if (h / fs > 4) {
    console.log(`Line box ${h}px is >4× font-size ${fs}px — metric inflation suspected`);
  }
}

/* 3. Canvas pixel-sampling for actual rendered glyph size */
/* (see detection section below) */

The triple-override: maximising line-box inflation with ascent + descent + gap

The three line-box metric descriptors — ascent-override, descent-override, and line-gap-override — each control a different additive component of line box height. At line-height: normal, the browser sums all three to compute the final line box height. A triple-override attack sets all three to large values simultaneously, maximising the per-line inflation and minimising how many consent lines fit in a fixed-height container.

/* Triple-override: maximise line box inflation */
@font-face {
  font-family: 'ConsentFont';
  src: url('...') format('woff2');

  /* Line box height = ascent + descent + line-gap (all as % of font-size) */
  /* Default values for a typical Latin web font (approximate): */
  /*   ascent:   ~80% of font-size  */
  /*   descent:  ~20% of font-size  */
  /*   line-gap: ~0-10% of font-size */
  /* Default line box at 16px: ~(0.80 + 0.20 + 0.05) × 16px ≈ 16.8px */

  /* Triple-override attack: */
  ascent-override:   300%;   /* +48px above baseline at 16px */
  descent-override:  300%;   /* +48px below baseline at 16px */
  line-gap-override: 200%;   /* +32px additional gap at 16px */
  /* Total: (3.0 + 3.0 + 2.0) × 16px = 128px per line box */
}

/* A consent container normally showing 10 lines at 22px line height (220px):
   Triple-override: 10 lines × 128px = 1280px total height
   Container is 220px tall with overflow:hidden → shows ~1.7 lines
   User sees the consent title and the first half-sentence. That's it.
   The remaining 8+ consent clauses are silently clipped. */

/* getComputedStyle(consentEl).lineHeight → "normal"
   el.scrollHeight → 1280px
   el.clientHeight → 220px
   el.scrollTop    → 0 (if overflow:hidden — no scrollbar, no scroll position)

   The only way to see the attack: scrollHeight >> clientHeight with overflow:hidden. */

size-adjust: the unique "shrink without changing font-size" descriptor

While the three line-metric descriptors affect line box height, size-adjust operates on a different axis: it scales the actual rendered size of each glyph. A value of size-adjust: 15% renders each glyph at 15% of its declared size. The glyphs of "consent" in a 16px font render at approximately 2.4px tall — below the threshold of visibility on any standard display. But the CSS property font-size remains 16px.

This creates a unique detection blind spot. WCAG Success Criterion 1.4.4 (Resize Text) and minimum font size checks typically inspect the computed font-size CSS property. WCAG 1.4.4 compliance is often tested by verifying that getComputedStyle(el).fontSize returns a value above a minimum threshold. But size-adjust makes the actual rendered glyph smaller without changing the property that these checks inspect. The property says 16px; the pixel says 2.4px.

/* size-adjust: the detector-invisible glyph shrinker */

@font-face {
  font-family: 'ConsentFont';
  size-adjust: 15%;
  src: url('...') format('woff2');
}

.consent-text {
  font-family: 'ConsentFont', sans-serif;
  font-size: 16px;  /* Declared and computed: 16px */
                    /* Actual rendered glyph height: 2.4px */
}

/* What WCAG audit tools see: */
getComputedStyle(el).fontSize  // "16px" — PASSES minimum size check
el.textContent.length          // Non-zero — PASSES non-empty check
el.getBoundingClientRect()     // Has non-zero dimensions — PASSES visibility check

/* What the user sees: */
/* A line of horizontal smears at 2.4px height — effectively invisible text */

/* The only CSS-API-based detection: */
/* getBoundingClientRect().height / textContent.split('\n').length */
/* → line height per line; if much smaller than declared font-size, flag */

/* More reliable: canvas pixel-sampling */
/* Render one character at known coords; sample the pixel column;
   count consecutive non-background pixels; that's the actual glyph height. */

Combining all four: a fully calibrated consent attack

The four descriptors can be combined in a single @font-face block to create a precisely calibrated compound attack. The combination provides two simultaneous effects: visibility destruction (size-adjust makes glyphs invisible) and layout destruction (triple metric overrides inflate line boxes to cause clipping). Either alone is detectable via a specific method; both together force the detection tooling to check against multiple independent failure modes simultaneously.

/* Full four-descriptor compound attack */
@font-face {
  font-family: 'UIFont';
  src: url('data:font/woff2;base64,...') format('woff2');

  /* Visibility destruction */
  size-adjust: 12%;          /* Glyphs rendered at 12% of 16px = 1.9px — sub-pixel */

  /* Layout destruction */
  ascent-override: 250%;     /* +40px above baseline */
  descent-override: 250%;    /* +40px below baseline */
  line-gap-override: 200%;   /* +32px additional gap */
  /* Total line box: (2.5 + 2.5 + 2.0) × 16px = 112px per line */

  /* Optional: scope to consent-specific codepoints */
  unicode-range: U+0020-007E; /* Full ASCII printable — all consent prose */
}

.consent-dialog {
  font-family: 'UIFont', Arial, sans-serif;
  max-height: 200px;
  overflow: hidden;
  /* line-height: not specified — defaults to "normal" → metric overrides apply */
}

/* Combined effect:
   - All consent glyphs render at 1.9px — sub-pixel invisible
   - Each consent line box is 112px tall
   - A 200px container shows approximately 1.8 inflated line boxes
   - scrollHeight ≈ 112px × N_lines; clientHeight = 200px
   - Visible area contains glyphs too small to read
   - Clipped area would also contain glyphs too small to read
   - Both effects reinforce each other: even if the user could scroll, text is invisible */

/* What getComputedStyle reports on the consent element:
   - fontSize: "16px"           → correct, unaffected by size-adjust
   - color: "rgb(26,26,26)"     → correct, untouched
   - visibility: "visible"      → correct, untouched
   - lineHeight: "normal"       → correct (it IS normal — the inflation is in metrics)
   - overflow: "hidden"         → correct, the explicit property
   - fontFamily: "UIFont"       → reveals the injected font family name
   Everything looks correct. The font name is the only lead. */

Canvas pixel-sampling: the only reliable rendered-size check

Because getComputedStyle is blind to font metric attacks and size-adjust in particular, canvas pixel-sampling is the gold-standard detection method for rendered glyph size. The technique: render a single test character from the consent font on an off-screen canvas at a known font-size, then scan pixel columns and rows to measure the actual height of the ink pixels. If the measured height is significantly smaller than the declared font-size, the font is using an adversarial size-adjust value.

/**
 * Canvas pixel-sampling: measure actual rendered glyph height
 * Returns the glyph's rendered height in pixels for the given character and font.
 */
function measureGlyphHeight(char, fontFamily, fontSize = 48) {
  const canvas = document.createElement('canvas');
  canvas.width = fontSize * 2;
  canvas.height = fontSize * 3;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#000000';
  ctx.font = `${fontSize}px "${fontFamily}", sans-serif`;
  ctx.textBaseline = 'middle';
  ctx.fillText(char, fontSize / 2, canvas.height / 2);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  let firstInkRow = -1, lastInkRow = -1;
  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      const i = (y * canvas.width + x) * 4;
      if (data[i] < 200) { // dark pixel = ink
        if (firstInkRow === -1) firstInkRow = y;
        lastInkRow = y;
        break;
      }
    }
  }

  if (firstInkRow === -1) return 0; // no ink = blank glyph
  return lastInkRow - firstInkRow + 1;
}

// Usage:
const measured = measureGlyphHeight('A', 'ConsentFont', 48);
const ratio = measured / 48;
if (ratio < 0.3) {
  console.error(`CRITICAL: ConsentFont glyph height ${measured}px for 48px declared size (${(ratio*100).toFixed(1)}%). size-adjust attack suspected.`);
}

scrollHeight comparison: the only reliable line-inflation check

For the metric override line-inflation attacks (ascent/descent/line-gap), the reliable detection method is comparing scrollHeight against clientHeight on consent containers. A container with overflow: hidden and a fixed height will have scrollHeight equal to its natural content height — which includes all the inflated line boxes — while clientHeight reflects only the visible height. A significant disparity (e.g., scrollHeight > 3 × clientHeight) in a consent container indicates metric inflation.

/**
 * scrollHeight check: detect line-box metric inflation in consent containers
 */
function detectLineInflation(consentSelector = '[data-consent], .consent, #consent-dialog') {
  const findings = [];

  function walk(el) {
    const cs = getComputedStyle(el);
    const isClipping = cs.overflow === 'hidden' || cs.overflowY === 'hidden';

    if (isClipping && el.scrollHeight > el.clientHeight) {
      const ratio = el.scrollHeight / el.clientHeight;
      if (ratio > 2) {
        findings.push({
          severity: ratio > 4 ? 'CRITICAL' : 'HIGH',
          element: el,
          scrollHeight: el.scrollHeight,
          clientHeight: el.clientHeight,
          ratio: ratio.toFixed(2),
          detail: `Consent element has scrollHeight ${el.scrollHeight}px vs clientHeight ${el.clientHeight}px (${ratio.toFixed(1)}× ratio). Content is clipped by overflow:hidden. If caused by @font-face metric overrides, the hidden content is not scrollable. Verify @font-face descent-override/line-gap-override values on the element's font family.`,
        });
      }
    }

    for (const child of el.children) walk(child);
  }

  for (const el of document.querySelectorAll(consentSelector)) {
    walk(el);
  }

  return findings;
}

Remediation: freezing the consent font

The root cause of metric override attacks is that the browser accepts an arbitrary @font-face declaration for a font family that consent text uses. Remediation focuses on removing this trust:

The detection stack SkillAudit applies

Detecting @font-face metric override attacks requires multiple independent checks because no single method catches all four descriptors:

What this means for MCP skill reviews

The metric override attack surface is particularly relevant to MCP skill reviews because MCP skills run JavaScript in the user's browser context and can inject arbitrary stylesheets. A skill that injects even a single <style> element containing a @font-face block with adversarial metric descriptors can manipulate any consent dialog on the page — not just dialogs the skill itself controls. The attack is cross-consent: it targets the rendering of all text using the shadowed font family, wherever that family appears.

Combined with the font tech() and COLRv1 attack surface we covered in a previous post, the @font-face rule has become the primary attack vector for sub-CSS consent manipulation. Every MCP skill that handles user consent — displaying agreement text, presenting pricing tiers, showing data-sharing opt-out controls — should be audited for its entire @font-face chain, with special attention to metric descriptor values and their compound effects on consent-text rendering.

The descent-override, line-gap-override, and size-adjust individual attack analyses cover each descriptor's full attack pattern and detection code. The combined unicode-range attack shows how these descriptors combine with character-range targeting for surgical price disclosure manipulation.