Bundle the real fonts into the design kit

scratch/design-kit/README.md

@@ -22,10 +22,11 @@ the card's group; the Design System pane uses it to build its index.
 - Markup in the cards mirrors real call sites in `src/lib/components/` and
   `src/routes/`. When a primitive's markup changes in the app, update its
   card.
-- Fonts: the app loads Hanken Grotesk, Spectral, and JetBrains Mono via
-  fontsource. The kit does not, so previews fall back to the system stacks
-  declared in the tokens. Shapes and colours are accurate; letterforms are
-  approximate.
+- Fonts: `fonts.css` bundles the real families (Hanken Grotesk, Spectral,
+  JetBrains Mono; latin subsets, SIL OFL) copied from the same fontsource
+  packages the app loads, so previews use the actual letterforms. When the
+  app's font versions change, re-copy the woff2 files from
+  `node_modules` into `fonts/`.
 
 ## Viewing locally
 
@@ -39,11 +40,12 @@ present to approve the plan):
 
 1. `list_projects`, or `create_project` the first time.
 2. `finalize_plan` with writes for `styles/*.css`, `*.html`, `kit.css`,
-   and `kit.js`, with this directory as `localDir`.
-3. `write_files` uploading the stylesheets into the project's `styles/`
-   and the cards plus the two kit scaffold files at the project root. The
-   symlink means `localPath: styles/tokens.css` resolves to the shipped
-   file.
+   `kit.js`, `fonts.css`, and `fonts/*.woff2`. Use the repository root as
+   `localDir`: the tool refuses to read through the `styles/` symlink
+   (it resolves outside this directory), so the stylesheets upload from
+   `src/lib/styles/` directly.
+3. `write_files` uploading the stylesheets into the project's `styles/`,
+   and the cards, scaffold, and font files at their kit-relative paths.
 
 Re-run the sync whenever a primitive or token changes. The sync is one-way,
 repo to project; never edit the system inside the project.

scratch/design-kit/fonts.css

@@ -0,0 +1,44 @@
+/* The real families, latin subsets, copied from the fontsource packages
+   the app loads (all SIL OFL). Family names match tokens.css. */
+@font-face {
+	font-family: 'Hanken Grotesk Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 100 900;
+	src: url(./fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
+}
+@font-face {
+	font-family: 'Spectral';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src: url(./fonts/spectral-latin-400-normal.woff2) format('woff2');
+}
+@font-face {
+	font-family: 'Spectral';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src: url(./fonts/spectral-latin-400-italic.woff2) format('woff2');
+}
+@font-face {
+	font-family: 'Spectral';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 500;
+	src: url(./fonts/spectral-latin-500-normal.woff2) format('woff2');
+}
+@font-face {
+	font-family: 'Spectral';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 600;
+	src: url(./fonts/spectral-latin-600-normal.woff2) format('woff2');
+}
+@font-face {
+	font-family: 'JetBrains Mono Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 100 800;
+	src: url(./fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
+}

scratch/design-kit/kit.css

@@ -1,3 +1,5 @@
+@import './fonts.css';
+
 /* Card scaffold shared by every preview. The system CSS comes from
    styles/; this file only lays out the three theme panes. */
 body {

scratch/design-kit/type.html

@@ -47,9 +47,9 @@
 				</div>
 			</div>
 			<p class="note">
-				The kit falls back to system faces; the app loads the real families via fontsource.
-				Sizes are ad hoc today; a small named ramp is proposed in the primitive consolidation
-				brief.
+				The kit bundles the real families (latin subsets of the same fontsource files the app
+				loads). Sizes are ad hoc today; a small named ramp is proposed in the primitive
+				consolidation brief.
 			</p>
 		</template>
 		<script src="kit.js"></script>