Merge pull request abue-ammar#12 from abue-ammar/ui-migration

abue-ammar · web-flow · commit 3f5c79fd18f3 · 2025-07-13T14:08:47.000+06:00
feat: preload and optimize font loading to reduce shifting and improv…
diff --git a/index.html b/index.html
@@ -30,6 +30,24 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Image Compressor</title>
+
+    <!-- Preload font for better performance and reduce font shifting -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      /* Prevent font shifting during initial load */
+      body {
+        font-family:
+          "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas,
+          "Courier New", monospace;
+        font-display: swap;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/index.css b/src/index.css
@@ -1,11 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
 html {
   scroll-behavior: smooth;
+  /* Ensure font rendering is optimized */
+  font-display: swap;
 }
 
 :root {
@@ -45,9 +46,15 @@ html {
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-  --font-sans: Roboto Mono, monospace;
-  --font-serif: Roboto Mono, monospace;
-  --font-mono: Roboto Mono, monospace;
+  --font-sans:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  --font-serif:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  --font-mono:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
   --radius: 0.625rem;
   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@@ -100,9 +107,15 @@ html {
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.275 0 0);
   --sidebar-ring: oklch(0.439 0 0);
-  --font-sans: Roboto Mono, monospace;
-  --font-serif: Roboto Mono, monospace;
-  --font-mono: Roboto Mono, monospace;
+  --font-sans:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  --font-serif:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  --font-mono:
+    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
   --radius: 0.625rem;
   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@@ -181,6 +194,16 @@ html {
   }
   body {
     @apply bg-background text-foreground;
+    /* Reduce font shifting by ensuring consistent baseline */
+    font-kerning: auto;
+    font-variant-ligatures: contextual;
+    text-rendering: optimizeLegibility;
+    font-feature-settings:
+      "kern" 1,
+      "liga" 1,
+      "calt" 1;
+    /* Prevent layout shift during font loading */
+    font-display: swap;
   }
 }
 
