appview: switch to Inter and IBM Plex Mono

flake.lock

···
         "url": "https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"
       }
     },
-    "ia-fonts-src": {
+    "ibm-plex-mono-src": {
       "flake": false,
       "locked": {
-        "lastModified": 1686932517,
-        "narHash": "sha256-2T165nFfCzO65/PIHauJA//S+zug5nUwPcg8NUEydfc=",
-        "owner": "iaolo",
-        "repo": "iA-Fonts",
-        "rev": "f32c04c3058a75d7ce28919ce70fe8800817491b",
-        "type": "github"
+        "lastModified": 1731402384,
+        "narHash": "sha256-OwUmrPfEehLDz0fl2ChYLK8FQM2p0G1+EMrGsYEq+6g=",
+        "type": "tarball",
+        "url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip"
       },
       "original": {
-        "owner": "iaolo",
-        "repo": "iA-Fonts",
-        "type": "github"
+        "type": "tarball",
+        "url": "https://github.com/IBM/plex/releases/download/@ibm/plex-mono@1.1.0/ibm-plex-mono.zip"
       }
     },
     "indigo": {
···
         "type": "github"
       }
     },
+    "inter-fonts-src": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1731680160,
+        "narHash": "sha256-5vdKKvHAeZi6igrfpbOdhZlDX2/5+UvzlnCQV6DdqoQ=",
+        "type": "tarball",
+        "url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip"
+      }
+    },
     "lucide-src": {
       "flake": false,
       "locked": {
···
       "inputs": {
         "gitignore": "gitignore",
         "htmx-src": "htmx-src",
-        "ia-fonts-src": "ia-fonts-src",
+        "ibm-plex-mono-src": "ibm-plex-mono-src",
         "indigo": "indigo",
+        "inter-fonts-src": "inter-fonts-src",
         "lucide-src": "lucide-src",
         "nixpkgs": "nixpkgs"
       }

flake.nix

···
       url = "https://github.com/lucide-icons/lucide/releases/download/0.483.0/lucide-icons-0.483.0.zip";
       flake = false;
     };
-    ia-fonts-src = {
-      url = "github:iaolo/iA-Fonts";
+    inter-fonts-src = {
+      url = "https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip";
       flake = false;
+    };
+    ibm-plex-mono-src = {
+        url = "https://github.com/IBM/plex/releases/download/%40ibm%2Fplex-mono%401.1.0/ibm-plex-mono.zip";
+        flake = false;
     };
     gitignore = {
       url = "github:hercules-ci/gitignore.nix";
···
     htmx-src,
     lucide-src,
     gitignore,
-    ia-fonts-src,
+    inter-fonts-src,
+    ibm-plex-mono-src,
   }: let
     supportedSystems = ["x86_64-linux" "x86_64-darwin" "aarch64-linux" "aarch64-darwin"];
     forAllSystems = nixpkgs.lib.genAttrs supportedSystems;
···
             mkdir -p appview/pages/static/{fonts,icons}
             cp -f ${htmx-src} appview/pages/static/htmx.min.js
             cp -rf ${lucide-src}/*.svg appview/pages/static/icons/
-            cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf appview/pages/static/fonts/
-            cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf appview/pages/static/fonts/
+            cp -f ${inter-fonts-src}/Inter/web/InterVariable*.woff2 appview/pages/static/fonts/
+            cp -f ${inter-fonts-src}/Inter/web/InterDisplay*.woff2 appview/pages/static/fonts/
+            cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono-Regular.woff2 appview/pages/static/fonts/
             ${pkgs.tailwindcss}/bin/tailwindcss -i input.css -o appview/pages/static/tw.css
             popd
           '';
···
           mkdir -p appview/pages/static/{fonts,icons}
           cp -f ${htmx-src} appview/pages/static/htmx.min.js
           cp -rf ${lucide-src}/*.svg appview/pages/static/icons/
-          cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf appview/pages/static/fonts/
-          cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf appview/pages/static/fonts/
+          cp -f ${inter-fonts-src}/web/InterVariable*.woff2 appview/pages/static/fonts/
+          cp -f ${inter-fonts-src}/web/InterDisplay*.woff2 appview/pages/static/fonts/
+          cp -f ${ibm-plex-mono-src}/fonts/complete/woff2/IBMPlexMono-Regular.woff2 appview/pages/static/fonts/
         '';
       };
     });

input.css

···
 @tailwind utilities;
 @layer base {
     @font-face {
-        font-family: "iA Writer Quattro S";
-        src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
-            format("truetype");
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterVariable.woff2") format("woff2");
         font-weight: normal;
         font-style: normal;
         font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
     }
-    @font-face {
-        font-family: "iA Writer Quattro S";
-        src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
-        font-weight: bold;
-        font-style: normal;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
+
     @font-face {
-        font-family: "iA Writer Quattro S";
-        src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
         font-weight: normal;
         font-style: italic;
         font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
-    @font-face {
-        font-family: "iA Writer Quattro S";
-        src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
-            format("truetype");
-        font-weight: bold;
-        font-style: italic;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
     }
 
     @font-face {
-        font-family: "iA Writer Mono S";
-        src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
-    @font-face {
-        font-family: "iA Writer Mono S";
-        src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
-        font-weight: bold;
-        font-style: normal;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
-    @font-face {
-        font-family: "iA Writer Mono S";
-        src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
+        font-family: "IBMPlexMono";
+        src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
         font-weight: normal;
         font-style: italic;
         font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
-    @font-face {
-        font-family: "iA Writer Mono S";
-        src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
-            format("truetype");
-        font-weight: bold;
-        font-style: italic;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
     }
 
-    @font-face {
-        font-family: "Inter";
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        font-feature-settings:
-            "calt" 1,
-            "kern" 1;
-    }
     ::selection {
         @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
     }
 
     @layer base {
         html {
-            letter-spacing: -0.01em;
-            word-spacing: -0.07em;
-            font-size: 14px;
+            font-size: 15px;
         }
         a {
             @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;

tailwind.config.js

···
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-	content: ["./appview/pages/templates/**/*.html", "./appview/pages/chroma.go"],
-	darkMode: "media",
-	theme: {
-		container: {
-			padding: "2rem",
-			center: true,
-			screens: {
-				sm: "500px",
-				md: "600px",
-				lg: "800px",
-				xl: "1000px",
-				"2xl": "1200px"
-			},
-		},
-		extend: {
-			fontFamily: {
-				sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
-				mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
-			},
-			typography: {
-				DEFAULT: {
-					css: {
-						maxWidth: 'none',
-						pre: {
-							backgroundColor: colors.gray[100],
-							color: colors.black,
-  						'@apply dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border': {}	
-						},
-					},
-				},
-			},
-		},
-	},
-	plugins: [
-		require('@tailwindcss/typography'),
-	]
+  content: ["./appview/pages/templates/**/*.html", "./appview/pages/chroma.go"],
+  darkMode: "media",
+  theme: {
+    container: {
+      padding: "2rem",
+      center: true,
+      screens: {
+        sm: "500px",
+        md: "600px",
+        lg: "800px",
+        xl: "1000px",
+        "2xl": "1200px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
+        mono: [
+          "IBMPlexMono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Monaco",
+          "Consolas",
+          "Liberation Mono",
+          "Courier New",
+          "monospace",
+        ],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "none",
+            pre: {
+              backgroundColor: colors.gray[100],
+              color: colors.black,
+              "@apply dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border":
+                {},
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
 };