font: Commit Mono

public/fonts/CommitMono/custom-settings.json

@@ -0,0 +1 @@
+{"weight":200,"italic":false,"alternates":{"cv01":false,"cv02":false,"cv03":false,"cv04":false,"cv05":true,"cv06":false,"cv07":false,"cv08":false,"cv09":false,"cv10":false,"cv11":false},"features":{"ss01":false,"ss02":false,"ss03":true,"ss04":true,"ss05":true},"letterSpacing":0,"lineHeight":1}

public/fonts/CommitMono/installation.txt

@@ -0,0 +1,11 @@
+A short guide for how to install and enable your shiny new version of Commit Mono.
+This is taken from section 08 Install from https://commitmono.com/
+
+#1 (Download the fonts)
+#2 Unzip the fonts. You'll see 4 font files. These 4 fonts make up a 'Style Group':
+    * CommitMono-Regular: Base version with settings and weight of your choice.
+    * CommitMono-Italic: An italic version, same weight as regular.
+    * CommitMono-Bold: A bold version, weight 700.
+    * CommitMono-BoldItalic: A bold version, weight 700, that is also italic.
+#3 Install all 4 fonts on your system:
+    * Windows: Right click the font in the folder and click "Instal

public/fonts/CommitMono/license.txt

@@ -0,0 +1,39 @@
+Copyright (c) 2023 Eigil Nikolajsen (eigi0088@gmail.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- 

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;
 }