diff --git a/index.html b/index.html
index 4ccd1bda..a8060de6 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenIDEA</title>
     <script src="/boot.js"></script>
+    <link rel="stylesheet" href="/src/styles/fonts.css" />
     <link rel="stylesheet" href="/splash.css" />
   </head>
   <body>
diff --git a/public/splash.css b/public/splash.css
index 0a8e561e..217b6cb7 100644
--- a/public/splash.css
+++ b/public/splash.css
@@ -19,11 +19,16 @@ body, .splash { background: #e9eaee; }
   box-sizing: border-box;
   font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
   color: #6c707e;
+  /* As on body: picking it up when the app CSS arrives would change the wordmark's weight. */
+  -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
   animation: splash-in 240ms ease-out 120ms both;
   transition: opacity 160ms ease-out;
+  /* One compositing layer for its whole life: WebKit layers it only while the opacity animates,
+     and the fade-out's fresh layer re-snaps the centred text, which then jumps up half a pixel. */
+  will-change: opacity;
 }
 .splash.splash-out { opacity: 0; pointer-events: none; }
 :root[data-theme^="dark"] .splash { color: #8c8f95; }
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 00000000..b51f53f4
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,4 @@
+/* Linked from index.html rather than imported by global.css, so the faces are known before the
+   splash first paints: the dev server injects the app CSS only once the bundle runs. */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";