Switch monospaced font to Cascadia Code

Remove local Roboto Mono TTF and preload the remote woff2 from Google
Fonts. Update @font-face to use woff2 with font-display: swap and a
200–700 weight range, remove legacy variable-fallback rules, and
replace font stacks to prefer the new monospaced font.

Author: abue-ammar

index.html

@@ -33,9 +33,9 @@
 
     <link
       rel="preload"
-      href="/fonts/RobotoMono-VariableFont_wght.ttf"
+      href="https://fonts.gstatic.com/s/cascadiacode/v5/qWcsB6-zq5zxD57cT5s916v3aDvbtxsis4I.woff2"
       as="font"
-      type="font/ttf"
+      type="font/woff2"
       crossorigin
     />
   </head>

public/fonts/RobotoMono-VariableFont_wght.ttf

@@ -1,47 +1,13 @@
+/* Cascadia Code - latin */
 @font-face {
-  font-family: "Roboto Mono";
+  font-family: "Cascadia Code";
   font-style: normal;
-  font-weight: 100 900;
-  font-display: block;
-  src: url("/fonts/RobotoMono-VariableFont_wght.ttf")
-    format("truetype-variations");
+  font-weight: 200 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cascadiacode/v5/qWcsB6-zq5zxD57cT5s916v3aDvbtxsis4I.woff2)
+    format("woff2");
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-    U+FFFD;
-}
-
-/* Fallback for older browsers that don't support variable fonts */
-@supports not (font-variation-settings: normal) {
-  @font-face {
-    font-family: "Roboto Mono";
-    font-style: normal;
-    font-weight: 400;
-    font-display: block;
-    src: url("/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
-  }
-
-  @font-face {
-    font-family: "Roboto Mono";
-    font-style: normal;
-    font-weight: 500;
-    font-display: block;
-    src: url("/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
-  }
-
-  @font-face {
-    font-family: "Roboto Mono";
-    font-style: normal;
-    font-weight: 700;
-    font-display: block;
-    src: url("/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
-  }
-
-  @font-face {
-    font-family: "Roboto Mono";
-    font-style: normal;
-    font-weight: 800;
-    font-display: block;
-    src: url("/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
-  }
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
 }

src/fonts.css

@@ -121,14 +121,11 @@ body::-webkit-scrollbar {
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
   --font-sans:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, Consolas, "Courier New", monospace;
   --font-serif:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, Consolas, "Courier New", monospace;
   --font-mono:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, 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);
@@ -182,14 +179,11 @@ body::-webkit-scrollbar {
   --sidebar-border: oklch(0.275 0 0);
   --sidebar-ring: oklch(0.439 0 0);
   --font-sans:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, Consolas, "Courier New", monospace;
   --font-serif:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, Consolas, "Courier New", monospace;
   --font-mono:
-    "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New",
-    monospace;
+    "Cascadia Code", "SF Mono", Monaco, 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);