fix: configure fonts properly, use geist, and move to preset wind4

Author: danielroe

app/app.vue

@@ -14,7 +14,7 @@ useHead({
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <a
       href="#main-content"
-      class="skip-link"
+      class="skip-link font-mono"
     >Skip to main content</a>
 
     <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
@@ -109,7 +109,6 @@ body {
   margin: 0;
   background-color: #0a0a0a;
   color: #fafafa;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
   line-height: 1.6;
 }
 
@@ -179,7 +178,6 @@ button {
   padding: 0.5rem 1rem;
   background: #fafafa;
   color: #0a0a0a;
-  font-family: 'JetBrains Mono', monospace;
   font-size: 0.875rem;
   z-index: 100;
   transition: top 0.2s ease;
@@ -208,7 +206,7 @@ button {
 .readme-content h5,
 .readme-content h6 {
   color: #fafafa;
-  font-family: 'JetBrains Mono', monospace;
+  @apply font-mono;
   font-weight: 500;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -240,7 +238,7 @@ button {
 }
 
 .readme-content code {
-  font-family: 'JetBrains Mono', monospace;
+  @apply font-mono;
   font-size: 0.875em;
   background: #1a1a1a;
   padding: 0.2em 0.4em;
@@ -267,7 +265,7 @@ button {
   background: transparent !important;
   border: none;
   padding: 0;
-  font-family: 'JetBrains Mono', monospace;
+  @apply font-mono;
   font-size: 0.875rem;
   color: #fafafa;
   /* Prevent code from forcing width */
@@ -310,7 +308,7 @@ button {
 
 .readme-content blockquote[data-callout]::before {
   display: block;
-  font-family: 'JetBrains Mono', monospace;
+  @apply font-mono;
   font-size: 0.75rem;
   font-weight: 500;
   text-transform: uppercase;
@@ -427,7 +425,7 @@ button {
 /* Inline code in package descriptions */
 p > span > code,
 .line-clamp-2 code {
-  font-family: 'JetBrains Mono', monospace;
+  @apply font-mono;
   font-size: 0.85em;
   background: #1a1a1a;
   padding: 0.1em 0.3em;

app/components/OgImage/Default.vue

@@ -4,7 +4,7 @@
   >
     <h1
       class="text-6xl font-medium tracking-tight"
-      style="font-family: 'JetBrains Mono', monospace"
+      style="font-family: 'JetBrains Mono'"
     >
       <span
         class="text-[#666666]"

app/components/OgImage/Package.vue

@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 <template>
   <div
     class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]"
-    style="font-family: 'JetBrains Mono', monospace"
+    style="font-family: 'JetBrains Mono'"
   >
     <h1 class="text-6xl font-medium tracking-tight">
       {{ name }}

nuxt.config.ts

@@ -40,10 +40,6 @@ export default defineNuxtConfig({
     '/_v/session': { proxy: 'https://npmx.dev/_vercel/insights/session' },
   },
 
-  future: {
-    compatibilityVersion: 4,
-  },
-
   experimental: {
     payloadExtraction: true,
     viewTransition: true,
@@ -75,7 +71,7 @@ export default defineNuxtConfig({
   fonts: {
     families: [
       {
-        name: 'Inter',
+        name: 'Geist',
         weights: ['400', '500', '600'],
         global: true,
       },

package.json

@@ -47,6 +47,7 @@
     "@playwright/test": "1.57.0",
     "@types/sanitize-html": "^2.16.0",
     "@unocss/nuxt": "^66.6.0",
+    "@unocss/preset-wind4": "^66.6.0",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vite-pwa/nuxt": "^1.1.0",
     "@vitest/browser-playwright": "^4.0.17",

pnpm-lock.yaml

@@ -1,14 +1,9 @@
-import {
-  defineConfig,
-  presetIcons,
-  presetUno,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { defineConfig, presetIcons, presetWind4, transformerDirectives, transformerVariantGroup } from 'unocss'
+import type { Theme } from '@unocss/preset-wind4/theme'
 
 export default defineConfig({
   presets: [
-    presetUno(),
+    presetWind4(),
     presetIcons({
       scale: 1.2,
     }),
@@ -18,6 +13,10 @@ export default defineConfig({
     transformerVariantGroup(),
   ],
   theme: {
+    font: {
+      mono: '\'JetBrains Mono\', monospace',
+      sans: '\'Geist\', system-ui, -apple-system, sans-serif',
+    },
     colors: {
       // Minimal black & white palette with subtle grays
       bg: {
@@ -71,7 +70,7 @@ export default defineConfig({
         'skeleton-pulse': 'infinite',
       },
     },
-  },
+  } satisfies Theme,
   shortcuts: [
     // Layout
     ['container', 'max-w-4xl mx-auto px-4 sm:px-6'],