From c31cb47bc808c067c55a0a2d6e61c4d2c2fdd2d3 Mon Sep 17 00:00:00 2001
From: Usama <83345144+usamaiqb@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:13:30 +0500
Subject: [PATCH] feat(reader): serve the bundled fonts to the renderer

---
 .../main/assets/renderer/android-host.html    |  65 +++++++
 app/src/main/assets/renderer/android-host.js  |  45 ++++-
 .../markreader/webview/FontResourceHandler.kt | 121 +++++++++++++
 .../webview/ReaderRendererSettings.kt         |  34 ++--
 .../markreader/webview/RendererSettings.kt    |  18 +-
 .../markreader/webview/WebViewDocumentHost.kt |   5 +
 .../markreader/webview/BundledFontsTest.kt    | 168 ++++++++++++++++++
 .../webview/ReaderRendererSettingsTest.kt     |  19 +-
 8 files changed, 451 insertions(+), 24 deletions(-)
 create mode 100644 app/src/main/java/com/markreader/webview/FontResourceHandler.kt
 create mode 100644 app/src/test/java/com/markreader/webview/BundledFontsTest.kt

diff --git a/app/src/main/assets/renderer/android-host.html b/app/src/main/assets/renderer/android-host.html
index 082537d..9c8dd32 100644
--- a/app/src/main/assets/renderer/android-host.html
+++ b/app/src/main/assets/renderer/android-host.html
@@ -64,6 +64,71 @@
 	<link rel="stylesheet" href="css/document-overrides.css">
 
 	<style>
+		/*
+		 * The bundled reading fonts.
+		 *
+		 * Host-only, and that is why they are declared here rather than in a stylesheet: the
+		 * fonts ship in this APK's `res/font/`, and the desktop app bundles none of them. A
+		 * vendored stylesheet naming these files would be a document stylesheet asserting
+		 * something only one host can serve.
+		 *
+		 * The URLs are absolute because the prefix is a `WebViewAssetLoader` path handler
+		 * (`FontResourceHandler.kt`), not a file beside this page — a relative href would
+		 * resolve into `assets/renderer/`. Same origin, so `font-src 'self'` covers them.
+		 *
+		 * These names are what `ReaderRendererSettings.kt` puts at the head of each stack. If
+		 * either side is edited alone the document renders in the fallback font and nothing
+		 * reports an error, which is exactly the failure this whole block exists to fix — so
+		 * `BundledFontsTest` asserts the two agree.
+		 *
+		 * `swap` rather than the default `block`: these are local reads that should complete
+		 * within a frame, and if one somehow 404s a reader would rather have Georgia
+		 * immediately than three seconds of invisible text and then Georgia.
+		 *
+		 * No italic face is bundled for any of them, so emphasis is synthesised by the WebView.
+		 * That is what the TextView reader has always drawn; adding four more files to remove a
+		 * skew is a decision about APK size, not about this plumbing.
+		 */
+		@font-face {
+			font-family: "Merriweather";
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url("/__mdr_fonts/merriweather_regular.ttf") format("truetype");
+		}
+
+		@font-face {
+			font-family: "Merriweather";
+			font-style: normal;
+			font-weight: 700;
+			font-display: swap;
+			src: url("/__mdr_fonts/merriweather_bold.ttf") format("truetype");
+		}
+
+		@font-face {
+			font-family: "Merriweather Sans";
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url("/__mdr_fonts/merriweather_sans_regular.ttf") format("truetype");
+		}
+
+		@font-face {
+			font-family: "Merriweather Sans";
+			font-style: normal;
+			font-weight: 700;
+			font-display: swap;
+			src: url("/__mdr_fonts/merriweather_sans_bold.ttf") format("truetype");
+		}
+
+		@font-face {
+			font-family: "JetBrains Mono";
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url("/__mdr_fonts/jetbrains_mono_regular.ttf") format("truetype");
+		}
+
 		/*
 		 * What `app.css` would otherwise give the document container, less everything that is
 		 * about desktop chrome. `markdown.css` already owns the inline padding and
diff --git a/app/src/main/assets/renderer/android-host.js b/app/src/main/assets/renderer/android-host.js
index fe4c80c..b79e709 100644
--- a/app/src/main/assets/renderer/android-host.js
+++ b/app/src/main/assets/renderer/android-host.js
@@ -176,12 +176,33 @@ view.on('activeHeading', slug => bridge.activeHeading(slug ?? ''));
 view.on('find', state => bridge.findState(state.index, state.total));
 
 /**
- * Writes the three typography custom properties `markdown.css` reads.
+ * The code font, held here rather than in `config.js`.
+ *
+ * The app has a code-font setting and the shared configuration has no key for one — code takes
+ * `--vscode-editor-font-family` from the theme shim, which is a *palette* value. Adding a key
+ * to `config.ts` is desktop work, and desktop has no bundled monospace to point it at, so this
+ * host carries the setting alone: `parseConfig` would drop it, which is why it is read off the
+ * raw payload in `applyConfig` and kept here instead of going through `setConfig`.
+ *
+ * Undefined until the app sends one, which leaves the theme's own stack in place.
+ *
+ * @type {string | undefined}
+ */
+let codeFontFamily;
+
+/**
+ * Writes the three typography custom properties `markdown.css` reads, and the one it reads for
+ * code.
  *
  * Nothing in the renderer does this today — `fontSize`, `lineHeight` and `fontFamily` are in
  * `config.ts` and are read by no one, so `markdown.css` falls back to its own `14px` — which is
  * a desktop-sized default on a phone. Delete this and its call sites the moment the shared
  * renderer applies its own configuration.
+ *
+ * The code family goes on the **body**, not on `<html>` with the other three. `theme.css`
+ * declares `--vscode-editor-font-family` on `body.vscode-dark` and `body.vscode-light`, and a
+ * custom property declared on a nearer ancestor wins — so a value set on `<html>` would be
+ * shadowed by the theme and silently do nothing. An inline style on the body beats a class rule.
  */
 function applyTypography() {
 	const config = getConfig();
@@ -189,6 +210,9 @@ function applyTypography() {
 	style.setProperty('--markdown-font-size', `${config.fontSize}px`);
 	style.setProperty('--markdown-line-height', `${config.lineHeight}px`);
 	style.setProperty('--markdown-font-family', config.fontFamily);
+	if (codeFontFamily) {
+		document.body.style.setProperty('--vscode-editor-font-family', codeFontFamily);
+	}
 }
 
 /** Settings the markdown-it engine is constructed with, so a change has to rebuild it. */
@@ -229,14 +253,23 @@ const page = {
 	},
 
 	/**
-	 * @param json {string} a JSON settings object, in the shape `config.ts` persists. Validated
-	 *   by `parseConfig`, which drops unknown keys and falls back per-setting — it is the same
-	 *   check the desktop app applies to settings that have been on disk, and Kotlin's DataStore
-	 *   is no more trustworthy than a file someone hand-edited.
+	 * @param json {string} a JSON settings object, in the shape `config.ts` persists, plus this
+	 *   host's own `codeFontFamily`. The shared keys are validated by `parseConfig`, which drops
+	 *   unknown ones and falls back per-setting — the same check the desktop app applies to
+	 *   settings that have been on disk, and Kotlin's DataStore is no more trustworthy than a file
+	 *   someone hand-edited. `codeFontFamily` is one `parseConfig` would drop, so it is taken off
+	 *   the raw payload and checked here.
 	 */
 	applyConfig(json) {
+		const raw = JSON.parse(json);
 		const before = getConfig();
-		const after = setConfig(parseConfig(JSON.parse(json)));
+		const after = setConfig(parseConfig(raw));
+
+		// Optional chaining because `parseConfig` tolerates a payload that is not an object at
+		// all, and a `null` from `JSON.parse` would otherwise throw here rather than there.
+		if (typeof raw?.codeFontFamily === 'string' && raw.codeFontFamily.trim().length > 0) {
+			codeFontFamily = raw.codeFontFamily;
+		}
 
 		applyTypography();
 		view.applyTheme();
diff --git a/app/src/main/java/com/markreader/webview/FontResourceHandler.kt b/app/src/main/java/com/markreader/webview/FontResourceHandler.kt
new file mode 100644
index 0000000..3f347de
--- /dev/null
+++ b/app/src/main/java/com/markreader/webview/FontResourceHandler.kt
@@ -0,0 +1,121 @@
+package com.markreader.webview
+
+import android.content.res.Resources
+import android.webkit.WebResourceResponse
+import androidx.webkit.WebViewAssetLoader
+import com.markreader.R
+import java.io.ByteArrayInputStream
+
+/**
+ * Serves the app's bundled reading fonts to the page.
+ *
+ * The fonts live in `res/font/`, which is where the platform wants them: Compose's typography
+ * and the raw-text reader both reach them through `R.font`, and a `TextView` cannot load a
+ * typeface out of `assets/` without being handed one. But the page can only fetch what a
+ * [WebViewAssetLoader] handler serves, so without this the reading-font setting had no effect on
+ * rendered Markdown at all — the CSS named `Merriweather`, nothing supplied it, and the stack
+ * fell straight through to `Georgia`. Merriweather and "System serif" were the same font.
+ *
+ * ### Why a handler of our own
+ *
+ * Two routes suggested themselves and neither is this one.
+ *
+ * [WebViewAssetLoader.ResourcesPathHandler] over `res/` is the obvious answer, and it resolves
+ * names with `Resources.getIdentifier` — a lookup by string, in a release build that has
+ * `shrinkResources` on. That build is not hypothetical: in the release APK these files are
+ * `res/8g.ttf` and `res/X5.ttf`, so a name is already the *only* way to address them and it is
+ * the thing a shrinker is entitled to take. It also opens the door to every resource the app has,
+ * by name, for the sake of five files. A fixed table of ids costs nothing and is the whole door.
+ *
+ * Moving the TTFs to `assets/` would need no handler at all, since `AssetsPathHandler` is already
+ * registered — but it drags the Kotlin side along: [com.markreader.ui.theme.Typography] builds
+ * its families at module scope with no `Context` to get an `AssetManager` from, so the theme
+ * would have to become context-aware to fix a font in the WebView. The alternative, keeping both
+ * copies, ships every glyph twice in an APK that F-Droid rebuilds byte-for-byte.
+ *
+ * So: `R.font` ids, named as constants the compiler checks, which is also what keeps the shrinker
+ * from touching them.
+ *
+ * ### The other half is in the page
+ *
+ * Serving bytes is not enough — CSS has to declare the families. Those `@font-face` rules are in
+ * `android-host.html`, not in any vendored stylesheet, because **which fonts a host bundles is
+ * host business**: desktop ships none of these and would have to serve them from somewhere else
+ * if it did. [BUNDLED_FONTS] and that block are one fact in two files, and
+ * `BundledFontsTest` is what stops them drifting apart — a missing rule or a mistyped URL
+ * does not fail here, it silently renders in the fallback font, which is the bug this fixes.
+ */
+internal class FontResourceHandler(
+    private val resources: Resources,
+    private val onMiss: (String) -> Unit = {},
+) : WebViewAssetLoader.PathHandler {
+
+    override fun handle(path: String): WebResourceResponse {
+        val id = BUNDLED_FONTS[path.trimStart('/')]
+        if (id == null) {
+            onMiss(path)
+            return notFound()
+        }
+
+        // A resource that is present at compile time and missing at run time means the shrinker
+        // took it, which is a build problem rather than a device one. It still cannot be allowed
+        // to reach the WebView's thread as an exception.
+        val body = runCatching { resources.openRawResource(id) }.getOrNull()
+        if (body == null) {
+            onMiss("$path — no such resource")
+            return notFound()
+        }
+
+        // No cache headers, matching `AssetsPathHandler`, which serves the renderer's own modules
+        // and stylesheets bare. These bytes are immutable within a build but the URL does not
+        // change between builds, so a long `max-age` would be a font that survives an app update.
+        return WebResourceResponse(MIME_TYPE, null, HTTP_OK, "OK", HEADERS, body)
+    }
+
+    private fun notFound(): WebResourceResponse =
+        WebResourceResponse(
+            "text/plain", "utf-8", HTTP_NOT_FOUND, "Not Found",
+            HEADERS, ByteArrayInputStream(ByteArray(0)),
+        )
+
+    internal companion object {
+
+        /**
+         * The served set, as URL name -> resource. Nothing else is reachable.
+         *
+         * Names match the resource names so a grep for either finds both. Only the weights the
+         * app actually bundles are here: there is no italic of any of them, so emphasis is
+         * synthesised by the WebView — the same skew the `TextView` reader has always drawn, and
+         * not a regression.
+         */
+        val BUNDLED_FONTS = mapOf(
+            "merriweather_regular.ttf" to R.font.merriweather_regular,
+            "merriweather_bold.ttf" to R.font.merriweather_bold,
+            "merriweather_sans_regular.ttf" to R.font.merriweather_sans_regular,
+            "merriweather_sans_bold.ttf" to R.font.merriweather_sans_bold,
+            "jetbrains_mono_regular.ttf" to R.font.jetbrains_mono_regular,
+        )
+
+        private const val MIME_TYPE = "font/ttf"
+
+        const val HTTP_OK = 200
+        const val HTTP_NOT_FOUND = 404
+
+        /**
+         * `nosniff` for the same reason [DocumentResourceHandler] states it: the type here is
+         * asserted, and sniffing is how an asserted type becomes a different one.
+         */
+        val HEADERS = mapOf("X-Content-Type-Options" to "nosniff")
+    }
+}
+
+/**
+ * The [WebViewAssetLoader] prefix the bundled fonts are served under.
+ *
+ * Deliberately not inside [RESOURCE_PREFIX]. Every path there names something the user adopted
+ * through SAF, and an app resource is not that — sharing the prefix would mean
+ * [SafPathSpace] having a branch for paths that are not virtual paths at all.
+ *
+ * Shared with the `@font-face` rules in `android-host.html`, which name it as an absolute path.
+ */
+internal const val FONT_PREFIX = "/__mdr_fonts/"
diff --git a/app/src/main/java/com/markreader/webview/ReaderRendererSettings.kt b/app/src/main/java/com/markreader/webview/ReaderRendererSettings.kt
index 0e1b5a3..c38d3e4 100644
--- a/app/src/main/java/com/markreader/webview/ReaderRendererSettings.kt
+++ b/app/src/main/java/com/markreader/webview/ReaderRendererSettings.kt
@@ -8,17 +8,17 @@ import kotlin.math.roundToInt
 /**
  * The reader's stored preferences, as the settings the renderer understands.
  *
- * Two of the app's settings do not survive the trip, and both are deliberate rather than
- * overlooked:
+ * One of the app's settings still does not survive the trip, and it is deliberate rather than
+ * overlooked: **Sepia and AMOLED have no palette in the renderer.** It ships VS Code's two,
+ * `vscode-light` and `vscode-dark`, and [RendererTheme] says so. Sepia reads as light and AMOLED
+ * as dark until a third and fourth palette are written — and they belong in the *desktop* repo's
+ * `document-overrides.css`, since this app only vendors a copy of it.
  *
- *  - **Sepia and AMOLED have no palette in the renderer.** It ships VS Code's two, `vscode-light`
- *    and `vscode-dark`, and [RendererTheme] says so. Sepia reads as light and AMOLED as dark
- *    until a third and fourth palette are written — and they belong in the *desktop* repo's
- *    `document-overrides.css`, since this app only vendors a copy of it.
- *  - **The bundled reading fonts are in `res/font/`**, which the page cannot reach: everything it
- *    loads comes through the asset loader. The families below still name Merriweather and
- *    JetBrains Mono first, so the mapping is already correct on the day the files are served —
- *    today CSS falls straight through them to the generic that follows.
+ * The fonts do arrive now. Both stacks below name a bundled family first, [FontResourceHandler]
+ * serves it out of `res/font/`, and `android-host.html` declares the `@font-face` rules that join
+ * the two — so Merriweather and "System serif" are finally different fonts. **Each stack still
+ * ends in a generic**, and that is not vestigial: the page falls back per family, so a font whose
+ * fetch fails degrades to something a phone actually has rather than to the WebView's default.
  */
 fun rendererSettingsFor(
     preferences: UserPreferences,
@@ -35,12 +35,14 @@ fun rendererSettingsFor(
         fontSize = fontSize,
         lineHeight = lineHeight.coerceIn(MIN_LINE_HEIGHT, MAX_LINE_HEIGHT),
         fontFamily = readingStack(preferences.readingFont),
+        codeFontFamily = codeStack(preferences.codeFont),
     )
 }
 
 /**
- * The body stack. Code is not asked about here: a fenced block takes its font from
- * `--vscode-editor-font-family` in the vendored theme, not from the document's body font.
+ * The body stack. It does not reach fenced code, which takes its font from
+ * `--vscode-editor-font-family` in the vendored theme — hence [codeStack] as a second setting
+ * rather than one family for the whole document.
  */
 private fun readingStack(font: ReadingFontPreference): String = when (font) {
     ReadingFontPreference.Merriweather -> "Merriweather, Georgia, \"Noto Serif\", serif"
@@ -49,7 +51,13 @@ private fun readingStack(font: ReadingFontPreference): String = when (font) {
         "\"Merriweather Sans\", system-ui, \"Roboto\", \"Noto Sans\", sans-serif"
 }
 
-/** Unused until the fonts are served, and kept beside its sibling so the pair move together. */
+/**
+ * The stack for fenced code, which the page applies over the theme's own monospace value.
+ *
+ * `SystemMono` deliberately keeps `"Roboto Mono"` ahead of the generic even though it is the
+ * *system* choice: `monospace` on Android resolves to Droid Sans Mono on older builds, and the
+ * point of the setting is "not the bundled font", not "the oldest font on the device".
+ */
 internal fun codeStack(font: CodeFontPreference): String = when (font) {
     CodeFontPreference.JetBrainsMono -> "\"JetBrains Mono\", \"Roboto Mono\", monospace"
     CodeFontPreference.SystemMono -> "\"Roboto Mono\", monospace"
diff --git a/app/src/main/java/com/markreader/webview/RendererSettings.kt b/app/src/main/java/com/markreader/webview/RendererSettings.kt
index be36eed..36b5a43 100644
--- a/app/src/main/java/com/markreader/webview/RendererSettings.kt
+++ b/app/src/main/java/com/markreader/webview/RendererSettings.kt
@@ -15,9 +15,10 @@ enum class RendererTheme(internal val wire: String) {
  * The renderer settings the Android host drives.
  *
  * A deliberately small slice of the shared renderer's configuration — the fields the app has an
- * opinion about today. The wire format is the object `config.ts` persists, and the page validates
- * every value again through `parseConfig` on the way in: an out-of-range font size falls back to
- * the host default for that one setting rather than rendering something unreadable.
+ * opinion about today, plus [codeFontFamily], which is this host's alone. The wire format is the
+ * object `config.ts` persists, and the page validates every value again through `parseConfig` on
+ * the way in: an out-of-range font size falls back to the host default for that one setting
+ * rather than rendering something unreadable.
  *
  * A null means "leave the host default alone". `android-host.js` sets phone-appropriate
  * typography through `setHostDefaults`, and an absent key is not overwritten by `parseConfig` —
@@ -29,6 +30,16 @@ data class RendererSettings(
     val fontSize: Int? = null,
     val lineHeight: Int? = null,
     val fontFamily: String? = null,
+    /**
+     * The monospace stack for fenced code.
+     *
+     * The one field here that is **not** part of the shared configuration. Code takes its font
+     * from `--vscode-editor-font-family`, which the vendored theme shim declares as a palette
+     * value, so there is no `config.ts` key to fill — `parseConfig` drops this one and
+     * `android-host.js` reads it off the raw payload instead. It is here rather than in a second
+     * call because it is a reader setting like the other four, and it changes with them.
+     */
+    val codeFontFamily: String? = null,
 ) {
     internal fun toJson(): JSONObject = JSONObject().apply {
         put("theme", theme.wire)
@@ -36,5 +47,6 @@ data class RendererSettings(
         fontSize?.let { put("fontSize", it) }
         lineHeight?.let { put("lineHeight", it) }
         fontFamily?.let { put("fontFamily", it) }
+        codeFontFamily?.let { put("codeFontFamily", it) }
     }
 }
diff --git a/app/src/main/java/com/markreader/webview/WebViewDocumentHost.kt b/app/src/main/java/com/markreader/webview/WebViewDocumentHost.kt
index b4fee5d..e4b5884 100644
--- a/app/src/main/java/com/markreader/webview/WebViewDocumentHost.kt
+++ b/app/src/main/java/com/markreader/webview/WebViewDocumentHost.kt
@@ -117,6 +117,11 @@ class WebViewDocumentHost(
         .addPathHandler(RESOURCE_PREFIX, DocumentResourceHandler(space) { miss ->
             Log.i(TAG, "no document resource at $miss")
         })
+        // The bundled reading fonts. `res/font/` is unreachable from the page otherwise, which
+        // is why the reading-font setting used to stop at the WebView's edge.
+        .addPathHandler(FONT_PREFIX, FontResourceHandler(context.resources) { miss ->
+            Log.w(TAG, "no bundled font at $miss")
+        })
         .build()
 
     /**
diff --git a/app/src/test/java/com/markreader/webview/BundledFontsTest.kt b/app/src/test/java/com/markreader/webview/BundledFontsTest.kt
new file mode 100644
index 0000000..3c4057a
--- /dev/null
+++ b/app/src/test/java/com/markreader/webview/BundledFontsTest.kt
@@ -0,0 +1,168 @@
+package com.markreader.webview
+
+import com.markreader.data.CodeFontPreference
+import com.markreader.data.ReadingFontPreference
+import com.markreader.data.UserPreferences
+import java.io.File
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertTrue
+import org.junit.Test
+
+/**
+ * The bundled fonts are one fact spread over three files, and this is what holds them together.
+ *
+ * [FontResourceHandler] serves the bytes, `android-host.html` declares the `@font-face` rules
+ * that ask for them, and [rendererSettingsFor] names the families in a CSS stack. Break the
+ * agreement between any two and **nothing reports an error**: the page requests a URL, gets a
+ * 404 it treats as one unavailable face, and renders the document in the next family in the
+ * stack. That is exactly the symptom this plumbing was written to fix, so it cannot be the way it
+ * regresses.
+ *
+ * The desktop repo learned this the hard way on the stylesheet split — `document.ts` registered
+ * highlights that only `app.css` painted, which the stub host could not catch because the page
+ * rendered, just wrongly. A test that reads both files is the only kind that catches it.
+ *
+ * What is *not* here is the handler's own behaviour — a hit streams, a miss 404s. `Resources` and
+ * `WebResourceResponse` are both android.jar stubs on this classpath, so a JVM test could
+ * construct the response and learn nothing from it; that half belongs on a device, or to
+ * Robolectric if the project ever takes it on.
+ */
+class BundledFontsTest {
+
+    // ------------------------------------------------------------------ the two sides agree
+
+    @Test
+    fun `every font the page asks for is one the host serves`() {
+        for (face in faces()) {
+            assertTrue(
+                "@font-face for ${face.family} requests ${face.url}, outside $FONT_PREFIX",
+                face.url.startsWith(FONT_PREFIX),
+            )
+            val name = face.url.removePrefix(FONT_PREFIX)
+            assertTrue(
+                "$name is requested by android-host.html and not in BUNDLED_FONTS",
+                name in FontResourceHandler.BUNDLED_FONTS,
+            )
+        }
+    }
+
+    @Test
+    fun `every font the host serves is one the page asks for`() {
+        // The inverse matters as much: a resource served and never referenced is a door held open
+        // for nothing, and it is how a renamed `@font-face` src goes unnoticed — the old entry
+        // still serves, the new URL 404s, and the document quietly loses its font.
+        val requested = faces().map { it.url.removePrefix(FONT_PREFIX) }.toSet()
+
+        assertEquals(
+            "BUNDLED_FONTS and the @font-face rules name different files",
+            FontResourceHandler.BUNDLED_FONTS.keys,
+            requested,
+        )
+    }
+
+    // ------------------------------------------------------------------------- the families
+
+    @Test
+    fun `each declared family has the weights the reader draws`() {
+        val weights = faces().groupBy({ it.family }, { it.weight })
+
+        // Every family needs a regular. The two body families need a bold as well: headings and
+        // strong text are ordinary Markdown, and a family with only a 400 face has its bold
+        // synthesised by the WebView — a smeared approximation of a weight that is in the APK.
+        assertEquals(setOf(400, 700), weights["Merriweather"]?.toSet())
+        assertEquals(setOf(400, 700), weights["Merriweather Sans"]?.toSet())
+        assertEquals(setOf(400), weights["JetBrains Mono"]?.toSet())
+    }
+
+    @Test
+    fun `a bundled preference leads with a family the page declares`() {
+        val declared = faces().map { it.family }.toSet()
+
+        assertTrue("Merriweather", leadingReadingFamily(ReadingFontPreference.Merriweather) in declared)
+        assertTrue(
+            "Merriweather Sans",
+            leadingReadingFamily(ReadingFontPreference.MerriweatherSans) in declared,
+        )
+        assertTrue("JetBrains Mono", leadingCodeFamily(CodeFontPreference.JetBrainsMono) in declared)
+    }
+
+    @Test
+    fun `a system preference leads with a family the page does not declare`() {
+        // The inverse of the setting: "System serif" that led with Merriweather would be the same
+        // font as Merriweather, which is the state this whole change came out of — the two were
+        // indistinguishable because neither was served.
+        val declared = faces().map { it.family }.toSet()
+
+        assertTrue(leadingReadingFamily(ReadingFontPreference.SystemSerif) !in declared)
+        assertTrue(leadingCodeFamily(CodeFontPreference.SystemMono) !in declared)
+    }
+
+    // ------------------------------------------------------------------------------- reading
+
+    private fun leadingReadingFamily(font: ReadingFontPreference): String =
+        leadingFamily(settings(UserPreferences(readingFont = font)).fontFamily)
+
+    private fun leadingCodeFamily(font: CodeFontPreference): String =
+        leadingFamily(settings(UserPreferences(codeFont = font)).codeFontFamily)
+
+    private fun settings(preferences: UserPreferences) =
+        rendererSettingsFor(preferences, isDark = false, isCodeBlockWrapEnabled = true)
+
+    private companion object {
+
+        /** The first family in a CSS stack, unquoted. */
+        fun leadingFamily(stack: String?): String =
+            stack.orEmpty().substringBefore(',').trim().trim('"')
+
+        private data class Face(val family: String, val weight: Int, val url: String)
+
+        // Raw strings: every one of these ends in `)` so the closing quote is unambiguous, and
+        // the trailing `"` of a CSS value is left to `[^"]+` to stop at rather than matched.
+        private val FACE_BLOCK = Regex("""@font-face\s*\{([^}]*)\}""")
+        private val FAMILY = Regex("""font-family:\s*"([^"]+)""")
+        private val WEIGHT = Regex("""font-weight:\s*(\d+)""")
+        private val SRC_URL = Regex("""url\("([^"]+)""")
+
+        /**
+         * The `@font-face` rules in the host page.
+         *
+         * Read off disk rather than mirrored in the test, because a copy of the block here would
+         * agree with itself while the page had drifted.
+         */
+        fun faces(): List<Face> {
+            val blocks = FACE_BLOCK.findAll(hostPage()).toList()
+            assertTrue("android-host.html declares no @font-face rules", blocks.isNotEmpty())
+            return blocks.map { block ->
+                val body = block.groupValues[1]
+                Face(
+                    family = requireIn(FAMILY, body, "font-family"),
+                    weight = requireIn(WEIGHT, body, "font-weight").toInt(),
+                    url = requireIn(SRC_URL, body, "src url"),
+                )
+            }
+        }
+
+        /** A face missing any of the three is a failure, not something to skip over. */
+        fun requireIn(pattern: Regex, body: String, what: String): String =
+            pattern.find(body)?.groupValues?.get(1)
+                ?: throw AssertionError("an @font-face rule has no $what:\n$body")
+
+        /**
+         * Walks up from the working directory, which Gradle sets to the module and other runners
+         * do not, so the test is not the thing that breaks when it is run from the IDE.
+         */
+        fun hostPage(): String {
+            val relative = "src/main/assets/renderer/android-host.html"
+            var directory: File? = File("").absoluteFile
+            while (directory != null) {
+                for (candidate in listOf(File(directory, relative), File(directory, "app/$relative"))) {
+                    if (candidate.isFile) {
+                        return candidate.readText()
+                    }
+                }
+                directory = directory.parentFile
+            }
+            throw AssertionError("no $relative above ${File("").absolutePath}")
+        }
+    }
+}
diff --git a/app/src/test/java/com/markreader/webview/ReaderRendererSettingsTest.kt b/app/src/test/java/com/markreader/webview/ReaderRendererSettingsTest.kt
index fce6473..61a9129 100644
--- a/app/src/test/java/com/markreader/webview/ReaderRendererSettingsTest.kt
+++ b/app/src/test/java/com/markreader/webview/ReaderRendererSettingsTest.kt
@@ -1,5 +1,6 @@
 package com.markreader.webview
 
+import com.markreader.data.CodeFontPreference
 import com.markreader.data.ReaderThemePreference
 import com.markreader.data.ReadingFontPreference
 import com.markreader.data.UserPreferences
@@ -59,14 +60,28 @@ class ReaderRendererSettingsTest {
     }
 
     @Test
-    fun `the bundled family is named first so it works the day it is served`() {
+    fun `the bundled family is named first, and the stack still ends in a generic`() {
         val merriweather = settings(UserPreferences(readingFont = ReadingFontPreference.Merriweather))
 
         assertTrue(merriweather.fontFamily!!.startsWith("Merriweather,"))
-        // ...and falls through to something a phone actually has today.
+        // The generic is not vestigial now that the font is served: the page falls back per
+        // family, so a face whose fetch fails lands on something the phone has.
         assertTrue(merriweather.fontFamily!!.endsWith("serif"))
     }
 
+    @Test
+    fun `the code font travels as its own setting`() {
+        // Not a `config.ts` key — fenced code takes `--vscode-editor-font-family` from the theme
+        // shim, so this one is the host's and `android-host.js` reads it off the raw payload.
+        // A null here is a code-font preference that silently does nothing in rendered Markdown.
+        val jetBrains = settings(UserPreferences(codeFont = CodeFontPreference.JetBrainsMono))
+
+        assertTrue(jetBrains.codeFontFamily!!.startsWith("\"JetBrains Mono\","))
+        assertTrue(jetBrains.codeFontFamily!!.endsWith("monospace"))
+        assertTrue(settings(UserPreferences(codeFont = CodeFontPreference.SystemMono))
+            .codeFontFamily!!.startsWith("\"Roboto Mono\""))
+    }
+
     @Test
     fun `the code block wrap toggle drives word wrap`() {
         assertTrue(settings(wrap = true).wordWrap)