Function applyHostFonts

applyHostFonts(fontCss: string): void

Apply host font CSS to the document.

This function takes the css.fonts string from McpUiHostContext.styles and injects it as a <style> tag. The CSS can contain @font-face rules for self-hosted fonts, @import statements for Google Fonts or other font services, or a combination of both.

The styles are only injected once. Subsequent calls are no-ops and will not create duplicate style tags.

Parameters

fontCss: string
CSS string containing @font-face rules and/or @import statements

Returns void

Example: Apply fonts from host context

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

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

Example: Host providing self-hosted fonts

// Example of what a host might provide:
const fontCss = `
  @font-face {
    font-family: "Anthropic Sans";
    src: url("https://assets.anthropic.com/.../Regular.otf") format("opentype");
    font-weight: 400;
  }
`;
applyHostFonts(fontCss);

Example: Host providing Google Fonts

// Example of what a host might provide:
const fontCss = `
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
`;
applyHostFonts(fontCss);

Example: Use host fonts in CSS

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

See

McpUiHostContext for the full host context structure