update header/og font (#524)

2026-02-22 16:09:37 -06:00
parent fca9d7ab5d
commit 4412899379
6 changed files with 31 additions and 45 deletions
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { GeistPixelSquare } from "geist/font/pixel";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { MobileNavProvider } from "@/components/mobile-nav-context";
@@ -65,7 +66,7 @@ export default async function RootLayout({
        )}
      </head>
      <body
-        className={`${geist.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
+        className={`${geist.variable} ${geistMono.variable} ${GeistPixelSquare.variable} antialiased bg-background text-foreground`}
      >
        <ThemeProvider>
          <MobileNavProvider>
@@ -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,
+        },
      ],
    },
  );
@@ -46,7 +46,7 @@ export function Header() {
            </svg>
          </span>
          <Link href="/">
-            <span className="font-medium tracking-tight text-lg">
+            <span className="font-medium tracking-tight text-lg" style={{ fontFamily: "var(--font-geist-pixel-square)" }}>
              agent-browser
            </span>
          </Link>