index.html now loads /api/fonts/fonts.css, synthesized at request time by goods-editor's mountEditorApi from the host's fonts/ directory (populated via fetch-fonts in goods-editor-module — the host-local fetch script shrinks to a pointer). Shipped synchronously in <head> on purpose: the module's runtime injector races first paint and the editor's text measurement gives wrong answers against fallback metrics until real fonts load. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
34 lines
1.5 KiB
HTML
34 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#fdf2f4" />
|
|
<title>Pawfectly Yours — Customize Your Shirt</title>
|
|
<!--
|
|
Fonts are served by the goods-editor module from the host's fonts/
|
|
directory (populated by `npm run fetch-fonts` in goods-editor-module).
|
|
mountEditorApi synthesizes the @font-face rules at request time
|
|
based on whatever .ttf/.otf/.woff2/.woff files are present, so
|
|
adding a font is a "drop file + restart" workflow with no code
|
|
change here. See goods-editor-module/src/server/fontRegistry.js
|
|
for the generator.
|
|
|
|
We deliberately ship this synchronously in <head> rather than
|
|
letting the module inject a <link> at mount time: the module's
|
|
runtime injector races first paint, and the editor's font-
|
|
dependent text measurement (`measureTextWidth`) gives wrong
|
|
answers against fallback metrics until the fonts load. The
|
|
host pays a tiny extra TTFB to make first paint correct.
|
|
<ApparelDesigner loadFonts={false}> in App.jsx / CustomizeRoute
|
|
tells the module not to also inject its own runtime tag.
|
|
-->
|
|
<link rel="stylesheet" href="/api/fonts/fonts.css">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.jsx"></script>
|
|
</body>
|
|
</html>
|