Skip to main content
MCP Apps SDK 
import { useHostFonts } from "@modelcontextprotocol/ext-apps/react";

​
Overview

useHostFonts injects host-provided font CSS into the document. It listens for onhostcontextchanged notifications and updates the fonts automatically when the host’s font configuration changes. The host sends font CSS as @font-face rules or @import statements in McpUiHostContext.styles.css.fonts. This hook injects those rules as a <style> tag via applyHostFonts(). For CSS variable and theme handling, use useHostStyleVariables separately, or use useHostStyles to apply everything at once.

​
Signature

function useHostFonts(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void
​
app
App | null
required
The connected App instance from useApp, or null during initialization.
​
initialContext
McpUiHostContext | null
Initial host context from app?.getHostContext(). Pass this to apply fonts immediately on mount without waiting for the first context change notification.

​
Usage

import { useApp, useHostFonts } from "@modelcontextprotocol/ext-apps/react";

function MyApp() {
  const { app } = useApp({
    appInfo: { name: "MyApp", version: "1.0.0" },
    capabilities: {},
  });

  useHostFonts(app, app?.getHostContext());

  return <div style={{ fontFamily: "var(--font-sans)" }}>Hello!</div>;
}

​
What It Applies

The host provides font CSS in McpUiHostContext.styles.css.fonts. This typically contains:
  • @font-face declarations for the host’s typeface
  • @import statements for web font services
The hook injects these as a <style> tag in the document head using applyHostFonts(). This makes the host’s fonts available for use via CSS variables like var(--font-sans).

​
When to Use

HookAppliesUse when
useHostStylesCSS variables + theme + fontsYou want everything (recommended)
useHostStyleVariablesCSS variables + theme onlyYou handle fonts separately or don’t need them
useHostFontsFonts onlyYou only need host fonts
  • useHostStyles — All-in-one styling hook (combines useHostStyleVariables with this hook)
  • useHostStyleVariables — CSS variables and theme hook
  • Fonts — How host font delivery works in MCP Apps
The sunpeak framework provides useHostContext which auto-applies host styles (including fonts) in React components.