examples/live-editor: default font, crisp preview, TTF fonts

Fixes found running the migrated editor:

- No fonts registered: CanvasKit has no system fonts, so the first render (the
  default code) threw. The worker now auto-downloads a default sans (Inter
  variable TTF from jsDelivr's google/fonts mirror, CORS-enabled) and awaits it
  before rendering. Registered first, it also backs the generic `sans-serif`.
- Blurry preview: the preview stretches the canvas to fill the pane, so it needs
  render headroom. Render at devicePixelRatio + 1 (matching the old editor)
  instead of exactly devicePixelRatio; fix the size label accordingly.
- Font picker didn't render: this skia build parses TTF/OTF/WOFF but not woff2,
  and fontsource serves variable fonts as woff2. Switch the picker to static
  TTF (latin regular + bold, other subsets regular); the CSS <link> still drives
  the editor's own HTML rendering. Verified TTF fetch + parse against Skia.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: seanghay

examples/live-editor/src/components/Preview.tsx

@@ -1,9 +1,10 @@
 import { Loader2, ZoomIn, ZoomOut } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
-// The worker renders at device density, so divide displayed pixels back to
-// logical CSS pixels for the size label.
-const DPR = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+// The worker renders at (devicePixelRatio + 1) — see render-worker.ts — so
+// divide the bitmap's pixels back to logical CSS pixels for the size label.
+const RENDER_DENSITY =
+  (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1) + 1;
 
 interface PreviewProps {
   canvas: HTMLCanvasElement | null;
@@ -31,8 +32,8 @@ export function Preview({ canvas, isRunning, borderless = false }: PreviewProps)
         <span className="font-medium text-neutral-700">Preview</span>
         {canvas && (
           <span className="text-neutral-400">
-            {Math.round(canvas.width / DPR)} ×{" "}
-            {Math.round(canvas.height / DPR)} px
+            {Math.round(canvas.width / RENDER_DENSITY)} ×{" "}
+            {Math.round(canvas.height / RENDER_DENSITY)} px
           </span>
         )}
         <div className="ml-auto flex items-center gap-1">

examples/live-editor/src/fonts.ts

@@ -37,14 +37,14 @@ type LoadedFontRecord =
   | { id: string; name: string; kind: "cdn"; link: HTMLLinkElement }
   | { id: string; name: string; kind: "custom" };
 
-/** Static font URL: {id}@{version}/{subset}-{weight}-{style}.woff2 */
+/**
+ * Static font URL as TTF: {id}@{version}/{subset}-{weight}-{style}.ttf
+ *
+ * TTF, not woff2: sone's WASM backend parses TTF/OTF/WOFF but not woff2, and
+ * fontsource only publishes its variable fonts as woff2.
+ */
 function staticUrl(id: string, subset: string, weight = 400, style = "normal", version = "latest") {
-  return `${CDN}/${id}@${version}/${subset}-${weight}-${style}.woff2`;
-}
-
-/** Variable font URL: {id}:vf@{version}/{subset}-{axes}-{style}.woff2 */
-function variableUrl(id: string, subset: string, axes = "wght", style = "normal", version = "latest") {
-  return `${CDN}/${id}:vf@${version}/${subset}-${axes}-${style}.woff2`;
+  return `${CDN}/${id}@${version}/${subset}-${weight}-${style}.ttf`;
 }
 
 // Ordered by likelihood — latin first so the primary registration succeeds fast
@@ -94,47 +94,35 @@ export async function loadFontFromCDN(
 ): Promise<void> {
   if (loadedFonts.has(fontId)) return;
 
-  // Inject CSS stylesheet — defines @font-face rules with unicode-range for HTML rendering
+  // Inject CSS stylesheet — @font-face rules with unicode-range for the editor's
+  // own HTML rendering (the browser handles woff2 there).
   const link = document.createElement("link");
   link.rel = "stylesheet";
   link.href = `${CDN}/${fontId}@latest/index.css`;
   link.crossOrigin = "anonymous";
   document.head.appendChild(link);
   loadedFonts.set(fontId, { id: fontId, name, kind: "cdn", link });
 
-  // Register the latin subset in the render worker so sone can shape with it.
-  const latinUrl = variableUrl(fontId, "latin");
-  workerBridge.registerFont(name, latinUrl);
-  try {
-    const face = new FontFace(name, `url(${latinUrl})`);
-    await face.load();
-    document.fonts.add(face);
-  } catch {
-    // Fall back to the static latin file for HTML rendering.
-    const url = staticUrl(fontId, "latin", weight);
+  // Register static TTF in the render worker (sone can't parse woff2). Latin
+  // gets regular + bold; other subsets get regular. Missing files 404 and are
+  // skipped silently in the worker's Font.load.
+  const registerTtf = async (subset: string, w: number) => {
+    const url = staticUrl(fontId, subset, w);
     workerBridge.registerFont(name, url);
     try {
-      const face = new FontFace(name, `url(${url})`);
+      const face = new FontFace(name, `url(${url})`, { weight: String(w) });
       await face.load();
       document.fonts.add(face);
-    } catch { /* latin unavailable */ }
-  }
+    } catch {
+      /* subset/weight unavailable */
+    }
+  };
 
-  // Load remaining subsets directly in parallel (skipping latin, already done above)
-  await Promise.all(
-    SUBSETS.filter((s) => s !== "latin").map(async (subset) => {
-      const urls = [variableUrl(fontId, subset), staticUrl(fontId, subset, weight)];
-      for (const url of urls) {
-        try {
-          const face = new FontFace(name, `url(${url})`);
-          await face.load();
-          document.fonts.add(face);
-          workerBridge.registerFont(name, url); // sync to worker
-          return;
-        } catch { /* subset unavailable */ }
-      }
-    })
-  );
+  await Promise.all([
+    registerTtf("latin", 400),
+    registerTtf("latin", 700),
+    ...SUBSETS.filter((s) => s !== "latin").map((s) => registerTtf(s, weight)),
+  ]);
 
   await document.fonts.ready;
 }
@@ -146,6 +134,8 @@ export async function loadCustomFontFile(
 ): Promise<void> {
   if (loadedFonts.has(fontId)) return;
 
+  // sone's WASM backend parses TTF/OTF/WOFF (not woff2); a woff2 upload will be
+  // rejected by the worker and simply won't render.
   const source = await fileToDataUrl(file);
   workerBridge.registerFont(name, source);
   try {

examples/live-editor/src/render-worker.ts

@@ -21,6 +21,21 @@ import { transformCode } from "./execute";
 // Point CanvasKit at the bundled wasm before the first render.
 configureSkia({ wasmFile: wasmUrl });
 
+// Auto-register a default sans font so the editor renders out of the box —
+// CanvasKit has no system fonts. jsDelivr serves the google/fonts TTF with
+// CORS; this build parses TTF/OTF/WOFF (not woff2), so a variable TTF is used
+// to get the full weight range. Registered first, it also backs the generic
+// `sans-serif` family that untyped text falls back to.
+const DEFAULT_FONT_NAME = "Inter";
+const DEFAULT_FONT_URL =
+  "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/inter/Inter%5Bopsz,wght%5D.ttf";
+
+const fontsReady = Font.load(DEFAULT_FONT_NAME, DEFAULT_FONT_URL).catch(
+  (err) => {
+    console.error("Failed to load the default font:", err);
+  },
+);
+
 // Image decode cache, shared across renders (keyed by url / bytes).
 const renderCache = new Map<string | Uint8Array, SoneImage>();
 
@@ -45,6 +60,7 @@ self.onmessage = async (e: MessageEvent) => {
   if (msg.type === "render") {
     const { id, code, dpr } = msg as { id: number; code: string; dpr: number };
     try {
+      await fontsReady;
       const node = await buildNode(code);
       if (node == null) {
         self.postMessage({
@@ -55,8 +71,11 @@ self.onmessage = async (e: MessageEvent) => {
         });
         return;
       }
-      // Render at device density so the preview is crisp on hi-dpi screens.
-      const png = await sone(node, { cache: renderCache }).png({ density: dpr });
+      // Render above device density: the preview stretches the canvas to fill
+      // the pane, so the extra resolution keeps it crisp when upscaled.
+      const png = await sone(node, { cache: renderCache }).png({
+        density: dpr + 1,
+      });
       const bitmap = await createImageBitmap(new Blob([png as BlobPart]));
       (self as unknown as Worker).postMessage(
         { type: "result", id, bitmap, width: bitmap.width, height: bitmap.height },
@@ -79,6 +98,7 @@ self.onmessage = async (e: MessageEvent) => {
       format: "png" | "jpeg" | "pdf" | "svg";
     };
     try {
+      await fontsReady;
       const node = await buildNode(code);
       if (node == null) {
         self.postMessage({ type: "exportError", id, message: "Nothing to export." });