fix: preload Inter font and use font-display: optional to prevent text reflow CLS

Preload the latin Inter woff2 so the font is available before first
paint. Switch font-display from swap to optional so the browser never
swaps in a late-arriving font, eliminating text reflow shifts.

Author: franklinjavier

src/routes/__root.tsx

@@ -75,6 +75,13 @@ export const Route = createRootRouteWithContext<{
       }),
     ],
     links: [
+      {
+        rel: 'preload',
+        href: '/fonts/Inter-latin.woff2',
+        as: 'font',
+        type: 'font/woff2',
+        crossOrigin: 'anonymous',
+      },
       { rel: 'stylesheet', href: appCss },
       {
         rel: 'apple-touch-icon',

src/styles/app.css

@@ -794,7 +794,7 @@ mark {
 }
 
 @font-face {
-  font-display: swap;
+  font-display: optional;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 100 900;
@@ -806,7 +806,7 @@ mark {
 }
 
 @font-face {
-  font-display: swap;
+  font-display: optional;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 100 900;