MCP Apps useHostFonts - Font Injection Hook

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 | null

required

The connected App instance from useApp, or null during initialization.

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

Hook	Applies	Use when
`useHostStyles`	CSS variables + theme + fonts	You want everything (recommended)
`useHostStyleVariables`	CSS variables + theme only	You handle fonts separately or don’t need them
`useHostFonts`	Fonts only	You 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.

Overview

App

MCP

React

Server

Styling

Types

MCP Apps useHostFonts - Font Injection Hook

Overview

Signature

Usage

What It Applies

When to Use

​Overview

​Signature

​Usage

​What It Applies

​When to Use

​Related

Overview

Signature

Usage

What It Applies

When to Use

Related