artifact-font-embeddinglisted

# Embedding real fonts in Artifacts Claude Artifacts run under a strict CSP that blocks requests to any external host — including a `<link>` to Google Fonts or any other font CDN. Linking one anyway doesn't error visibly; it silently falls back to the next font in the stack, and the artifact looks like it's using the right typeface when it isn't. The only reliable way to show a *real* typeface inside an Artifact is to inline the font file itself as a base64 `@font-face` data URI. This matters most for font-pairing comparisons ("show me 5 options for this site's typography") and any other design mockup where the actual letterforms are the point — a system-font fallback defeats the purpose of the preview. ## Core workflow 1. **Source the real font files via [Fontsource](https://fontsource.org/)**, not by hand-downloading from Google Fonts. Fontsource packages the entire Google Fonts catalog (plus some others) as npm packages built for self-hosting — this is the fastest way to get a real `.woff2` file for any named typeface. ```bash mkdir -p /tmp/font-scratch && cd /tmp/font-scratch npm init -y >/dev/null 2>&1 npm install @fontsource-variable/fraunces @fontsource-variable/inter # Static (non-variable) families use the plain package instead: npm install @fontsource/libre-caslon-display ``` Prefer the `@fontsource-variable/*` package when one exists (most popular families have one) — a single file covers the whole weight range instead