kyletruong · kyletruong · Apr 1, 2026 · Mar 31, 2026
diff --git a/apps/dotdev/src/app.css b/apps/dotdev/src/app.css
@@ -4,8 +4,192 @@
 
 @source '../../../packages/ui/src';
 
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Thin'),
+    url('/api/fonts/BerkeleyMono-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono ExtraLight'),
+    url('/api/fonts/BerkeleyMono-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Light'),
+    url('/api/fonts/BerkeleyMono-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono SemiLight'),
+    url('/api/fonts/BerkeleyMono-SemiLight.woff2') format('woff2');
+  font-weight: 350;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Regular'),
+    url('/api/fonts/BerkeleyMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Medium'),
+    url('/api/fonts/BerkeleyMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono SemiBold'),
+    url('/api/fonts/BerkeleyMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Bold'),
+    url('/api/fonts/BerkeleyMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono ExtraBold'),
+    url('/api/fonts/BerkeleyMono-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Black'),
+    url('/api/fonts/BerkeleyMono-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Thin Oblique'),
+    url('/api/fonts/BerkeleyMono-Thin-Oblique.woff2') format('woff2');
+  font-weight: 100;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono ExtraLight Oblique'),
+    url('/api/fonts/BerkeleyMono-ExtraLight-Oblique.woff2') format('woff2');
+  font-weight: 200;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Light Oblique'),
+    url('/api/fonts/BerkeleyMono-Light-Oblique.woff2') format('woff2');
+  font-weight: 300;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono SemiLight Oblique'),
+    url('/api/fonts/BerkeleyMono-SemiLight-Oblique.woff2') format('woff2');
+  font-weight: 350;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Oblique'),
+    url('/api/fonts/BerkeleyMono-Oblique.woff2') format('woff2');
+  font-weight: 400;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Medium Oblique'),
+    url('/api/fonts/BerkeleyMono-Medium-Oblique.woff2') format('woff2');
+  font-weight: 500;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono SemiBold Oblique'),
+    url('/api/fonts/BerkeleyMono-SemiBold-Oblique.woff2') format('woff2');
+  font-weight: 600;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Bold Oblique'),
+    url('/api/fonts/BerkeleyMono-Bold-Oblique.woff2') format('woff2');
+  font-weight: 700;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono ExtraBold Oblique'),
+    url('/api/fonts/BerkeleyMono-ExtraBold-Oblique.woff2') format('woff2');
+  font-weight: 800;
+  font-style: oblique;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Berkeley Mono';
+  src:
+    local('Berkeley Mono Black Oblique'),
+    url('/api/fonts/BerkeleyMono-Black-Oblique.woff2') format('woff2');
+  font-weight: 900;
+  font-style: oblique;
+  font-display: swap;
+}
+
 @theme inline {
   --font-blog: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
+  --font-mono:
+    'Berkeley Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 @layer base {

diff --git a/apps/dotdev/src/routeTree.gen.ts b/apps/dotdev/src/routeTree.gen.ts
@@ -13,6 +13,7 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as BlogIndexRouteImport } from './routes/blog/index'
 import { Route as BlogSlugRouteImport } from './routes/blog/$slug'
 import { Route as ApiOgSplatRouteImport } from './routes/api/og.$'
+import { Route as ApiFontsSplatRouteImport } from './routes/api/fonts.$'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -34,38 +35,47 @@ const ApiOgSplatRoute = ApiOgSplatRouteImport.update({
   path: '/api/og/$',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiFontsSplatRoute = ApiFontsSplatRouteImport.update({
+  id: '/api/fonts/$',
+  path: '/api/fonts/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/blog/': typeof BlogIndexRoute
+  '/api/fonts/$': typeof ApiFontsSplatRoute
   '/api/og/$': typeof ApiOgSplatRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/blog': typeof BlogIndexRoute
+  '/api/fonts/$': typeof ApiFontsSplatRoute
   '/api/og/$': typeof ApiOgSplatRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/blog/': typeof BlogIndexRoute
+  '/api/fonts/$': typeof ApiFontsSplatRoute
   '/api/og/$': typeof ApiOgSplatRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/blog/$slug' | '/blog/' | '/api/og/$'
+  fullPaths: '/' | '/blog/$slug' | '/blog/' | '/api/fonts/$' | '/api/og/$'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/blog/$slug' | '/blog' | '/api/og/$'
-  id: '__root__' | '/' | '/blog/$slug' | '/blog/' | '/api/og/$'
+  to: '/' | '/blog/$slug' | '/blog' | '/api/fonts/$' | '/api/og/$'
+  id: '__root__' | '/' | '/blog/$slug' | '/blog/' | '/api/fonts/$' | '/api/og/$'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlogSlugRoute: typeof BlogSlugRoute
   BlogIndexRoute: typeof BlogIndexRoute
+  ApiFontsSplatRoute: typeof ApiFontsSplatRoute
   ApiOgSplatRoute: typeof ApiOgSplatRoute
 }
 
@@ -99,13 +109,21 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiOgSplatRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/fonts/$': {
+      id: '/api/fonts/$'
+      path: '/api/fonts/$'
+      fullPath: '/api/fonts/$'
+      preLoaderRoute: typeof ApiFontsSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlogSlugRoute: BlogSlugRoute,
   BlogIndexRoute: BlogIndexRoute,
+  ApiFontsSplatRoute: ApiFontsSplatRoute,
   ApiOgSplatRoute: ApiOgSplatRoute,
 }
 export const routeTree = rootRouteImport

diff --git a/apps/dotdev/src/routes/api/fonts.$.ts b/apps/dotdev/src/routes/api/fonts.$.ts
@@ -0,0 +1,32 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+const Route = createFileRoute('/api/fonts/$')({
+  server: {
+    handlers: {
+      GET: async ({ context, params, request }) => {
+        const referer = request.headers.get('Origin') ?? request.headers.get('Referer') ?? ''
+        try {
+          const hostname = new URL(referer).hostname
+          if (hostname !== 'k9.dev') {
+            return new Response('Forbidden', { status: 403 })
+          }
+        } catch {
+          return new Response('Forbidden', { status: 403 })
+        }
+
+        const key = params._splat ?? ''
+        const font = await context.env.FONTS.get(key, 'arrayBuffer')
+        if (!font) return new Response('Not Found', { status: 404 })
+
+        return new Response(font, {
+          headers: {
+            'Cache-Control': 'public, max-age=31536000, immutable',
+            'Content-Type': 'font/woff2',
+          },
+        })
+      },
+    },
+  },
+})
+
+export { Route }
diff --git a/apps/dotdev/src/server.ts b/apps/dotdev/src/server.ts
@@ -5,13 +5,14 @@ declare module '@tanstack/react-start' {
     server: {
       requestContext: {
         ctx: ExecutionContext
+        env: Env
       }
     }
   }
 }
 
 export default {
-  async fetch(request: Request, _env: Env, ctx: ExecutionContext) {
-    return handler.fetch(request, { context: { ctx } })
+  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
+    return handler.fetch(request, { context: { ctx, env } })
   },
 }
diff --git a/apps/dotdev/worker-configuration.d.ts b/apps/dotdev/worker-configuration.d.ts
@@ -1,11 +1,12 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types` (hash: 7ff3bb0f1092404b73cee7d7a766c7dc)
+// Generated by Wrangler by running `wrangler types` (hash: 978bfc00b53fec21bc1c66580cb0de59)
 // Runtime types generated with workerd@1.20260317.1 2026-02-24 nodejs_compat
 declare namespace Cloudflare {
 	interface GlobalProps {
 		mainModule: typeof import("./src/server");
 	}
 	interface Env {
+		FONTS: KVNamespace;
 	}
 }
 interface Env extends Cloudflare.Env {}

diff --git a/apps/dotdev/wrangler.jsonc b/apps/dotdev/wrangler.jsonc
@@ -5,7 +5,12 @@
   "compatibility_flags": ["nodejs_compat"],
   "main": "src/server.ts",
   "name": "dotdev",
-  "routes": [{ "pattern": "k9.dev", "custom_domain": true }],
+  "routes": [
+    {
+      "pattern": "k9.dev",
+      "custom_domain": true,
+    },
+  ],
   "observability": {
     "logs": {
       "enabled": true,
@@ -14,7 +19,15 @@
       "enabled": true,
     },
   },
-  "placement": { "mode": "smart" },
+  "placement": {
+    "mode": "smart",
+  },
   "preview_urls": true,
   "workers_dev": false,
+  "kv_namespaces": [
+    {
+      "binding": "FONTS",
+      "id": "a6bada4604014a3cb884f0b61c6a4397",
+    },
+  ],
 }