From 22b4186c7261e065f01e03e2b15974bc8b923282 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Fri, 24 Jul 2026 16:48:05 +0000
Subject: [PATCH] Prevent layout shift while the app font loads

Amp-Thread-ID: https://ampcode.com/threads/T-019f9416-08a9-714d-942a-c753bb3724a7
---
 app/assets/tailwind/main.css               | 7 +++++++
 app/javascript/entrypoints/application.css | 3 ++-
 app/javascript/entrypoints/inertia.ts      | 1 -
 app/javascript/ssr/ssr.ts                  | 1 -
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/tailwind/main.css b/app/assets/tailwind/main.css
index 5e689f821..4c5b33e2a 100644
--- a/app/assets/tailwind/main.css
+++ b/app/assets/tailwind/main.css
@@ -18,11 +18,18 @@
   }
 }
 
+@font-face {
+  font-family: "Spline Sans Fallback";
+  src: local("Arial"), local("Liberation Sans"), local("DejaVu Sans");
+  size-adjust: 89.6%;
+}
+
 body,
 html {
   font-family:
     "Spline Sans Variable",
     "Spline Sans",
+    "Spline Sans Fallback",
     -apple-system,
     BlinkMacSystemFont,
     "Inter",
diff --git a/app/javascript/entrypoints/application.css b/app/javascript/entrypoints/application.css
index 66c3e36f7..0a97b1ca1 100644
--- a/app/javascript/entrypoints/application.css
+++ b/app/javascript/entrypoints/application.css
@@ -1,4 +1,5 @@
-@import '../../assets/tailwind/application.css';
+@import "@fontsource-variable/spline-sans";
+@import "../../assets/tailwind/application.css";
 
 @plugin '@tailwindcss/typography';
 @plugin '@tailwindcss/forms';
diff --git a/app/javascript/entrypoints/inertia.ts b/app/javascript/entrypoints/inertia.ts
index e0c54ffca..83ca5fbe0 100644
--- a/app/javascript/entrypoints/inertia.ts
+++ b/app/javascript/entrypoints/inertia.ts
@@ -1,4 +1,3 @@
-import "@fontsource-variable/spline-sans";
 import { createInertiaApp, type ResolvedComponent } from "@inertiajs/svelte";
 
 const pages = import.meta.glob<ResolvedComponent>("../pages/**/*.svelte");
diff --git a/app/javascript/ssr/ssr.ts b/app/javascript/ssr/ssr.ts
index e60960d5c..c2cb7bcfb 100644
--- a/app/javascript/ssr/ssr.ts
+++ b/app/javascript/ssr/ssr.ts
@@ -1,4 +1,3 @@
-import "@fontsource-variable/spline-sans";
 import { createInertiaApp, type ResolvedComponent } from "@inertiajs/svelte";
 
 const pages = import.meta.glob<ResolvedComponent>("../pages/**/*.svelte");