update header/og font (#524)

docs/src/app/og/og-image.tsx

@@ -4,19 +4,21 @@ import { join } from "node:path";
 
 export { getPageTitle } from "@/lib/page-titles";
 
-let fontCache: { geistRegular: Buffer } | null = null;
+let fontCache: { geistRegular: Buffer; geistPixelSquare: Buffer } | null =
+  null;
 
 async function loadFonts() {
   if (fontCache) return fontCache;
-  const geistRegular = await readFile(
-    join(process.cwd(), "public/Geist-Regular.ttf"),
-  );
-  fontCache = { geistRegular };
+  const [geistRegular, geistPixelSquare] = await Promise.all([
+    readFile(join(process.cwd(), "public/Geist-Regular.ttf")),
+    readFile(join(process.cwd(), "public/GeistPixel-Square.ttf")),
+  ]);
+  fontCache = { geistRegular, geistPixelSquare };
   return fontCache;
 }
 
 export async function renderOgImage(title: string) {
-  const { geistRegular } = await loadFonts();
+  const { geistRegular, geistPixelSquare } = await loadFonts();
 
   return new ImageResponse(
     <div
@@ -52,7 +54,7 @@ export async function renderOgImage(title: string) {
         <span
           style={{
             fontSize: 36,
-            fontFamily: "Geist",
+            fontFamily: "GeistPixelSquare",
             fontWeight: 400,
             color: "white",
           }}
@@ -98,6 +100,12 @@ export async function renderOgImage(title: string) {
           style: "normal",
           weight: 400,
         },
+        {
+          name: "GeistPixelSquare",
+          data: geistPixelSquare.buffer as ArrayBuffer,
+          style: "normal",
+          weight: 400,
+        },
       ],
     },
   );