MCP Apps Fonts - Apply Host-Provided Typography

import { applyHostFonts } from "@modelcontextprotocol/ext-apps";

function applyHostFonts(fontCss: string): void

// Apply when host context changes
app.onhostcontextchanged = (ctx) => {
  if (ctx.styles?.css?.fonts) {
    applyHostFonts(ctx.styles.css.fonts);
  }
};

// Apply initial fonts after connecting
await app.connect();
const ctx = app.getHostContext();
if (ctx?.styles?.css?.fonts) {
  applyHostFonts(ctx.styles.css.fonts);
}

body {
  font-family: var(--font-sans, system-ui, sans-serif);
}

code {
  font-family: var(--font-mono, monospace);
}

@font-face {
  font-family: "Anthropic Sans";
  src: url("https://assets.anthropic.com/.../Regular.otf") format("opentype");
  font-weight: 400;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

import {
  applyDocumentTheme,
  applyHostStyleVariables,
  applyHostFonts,
} from "@modelcontextprotocol/ext-apps";

function applyHostContext(ctx) {
  if (ctx.theme) {
    applyDocumentTheme(ctx.theme);
  }
  if (ctx.styles?.variables) {
    applyHostStyleVariables(ctx.styles.variables);
  }
  if (ctx.styles?.css?.fonts) {
    applyHostFonts(ctx.styles.css.fonts);
  }
}

app.onhostcontextchanged = applyHostContext;

await app.connect();
const ctx = app.getHostContext();
if (ctx) applyHostContext(ctx);