font: Commit Mono

src/pages/font.astro

@@ -0,0 +1,31 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+const weights = [
+  200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550,
+  575, 600, 625, 650, 675, 700,
+];
+
+const sampleText = "The quick brown fox jumps over the lazy dog 0123456789.";
+---
+
+<Layout currentPage={{ title: "font", path: "/font" }}>
+  <h2 class="text-2xl font-600 text-ayu-green-500 mb-2">Commit Mono</h2>
+  <p class="text-ayu-gutter mb-6"></p>
+  <div class="flex flex-col gap-3">
+    {
+      weights.map((weight, index) => (
+        <div
+          class={`flex flex-wrap items-center gap-4 pb-2 ${index < weights.length - 1 ? "border-b border-ayu-gutter-dim" : ""}`}
+        >
+          <span class="w-6 text-ayu-gutter" style={`font-weight: ${weight};`}>
+            {weight}
+          </span>
+          <span class="text-lg" style={`font-weight: ${weight};`}>
+            {sampleText}
+          </span>
+        </div>
+      ))
+    }
+  </div>
+</Layout>

src/styles/global.css

@@ -1,7 +1,21 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
-
 @import "tailwindcss";
 
+@font-face {
+    font-family: "Commit Mono";
+    src: url("/fonts/CommitMono/CommitMono VariableFont.woff2") format("woff2");
+    font-weight: 200 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Commit Mono";
+    src: url("/fonts/CommitMono/CommitMono VariableFont.woff2") format("woff2");
+    font-weight: 200 700;
+    font-style: italic;
+    font-display: swap;
+}
+
 :root {
     color-scheme: dark;
 
@@ -96,35 +110,35 @@
 }
 
 .font-300 {
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 300;
     font-style: normal;
 }
 
 .font-400 {
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
 }
 
 .font-500 {
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
 }
 
 .font-600 {
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 600;
     font-style: normal;
 }
 
 .font-700 {
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 700;
     font-style: normal;
@@ -133,7 +147,7 @@
 body {
     background-color: var(--ayu-bg);
     color: var(--ayu-fg);
-    font-family: "Fira Code", monospace;
+    font-family: "Commit Mono", monospace;
     font-weight: 400;
     font-style: normal;
 }