fix: og edge cases with IAST characters handled

app/api/og/route.tsx

@@ -4,25 +4,21 @@ import { join } from "node:path";
 
 export const runtime = "nodejs";
 
-// Cache the font data at module level so it's only loaded once
-let geistBoldData: ArrayBuffer | null = null;
-let geistRegularData: ArrayBuffer | null = null;
+// Cache font data at module level so they're only loaded once
+let notoRegularData: Buffer | null = null;
+let notoBoldData: Buffer | null = null;
 
 async function loadFonts() {
-  if (!geistBoldData) {
-    // Fetch Geist Bold from Google Fonts CDN
-    const boldRes = await fetch(
-      "https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-700-normal.woff",
-    );
-    geistBoldData = await boldRes.arrayBuffer();
+  const fontsDir = join(process.cwd(), "public/fonts/Noto_Sans/static");
+
+  if (!notoRegularData) {
+    notoRegularData = await readFile(join(fontsDir, "NotoSans-Regular.ttf"));
   }
-  if (!geistRegularData) {
-    const regularRes = await fetch(
-      "https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-400-normal.woff",
-    );
-    geistRegularData = await regularRes.arrayBuffer();
+  if (!notoBoldData) {
+    notoBoldData = await readFile(join(fontsDir, "NotoSans-Bold.ttf"));
   }
-  return { bold: geistBoldData, regular: geistRegularData };
+
+  return { regular: notoRegularData, bold: notoBoldData };
 }
 
 export async function GET(request: Request) {
@@ -64,7 +60,7 @@ export async function GET(request: Request) {
           display: "flex",
           flexDirection: "row",
           backgroundColor: "#faf5f0",
-          fontFamily: "Geist, sans-serif",
+          fontFamily: "Noto Sans, sans-serif",
           overflow: "hidden",
           position: "relative",
         }}
@@ -113,10 +109,10 @@ export async function GET(request: Request) {
               fontSize: 36,
               fontWeight: 700,
               color: "#2d2418",
-              lineHeight: 1.15,
+              lineHeight: 1.4,
               display: "flex",
               overflow: "hidden",
-              maxHeight: 84,
+              maxHeight: 104,
             }}
           >
             {displayTitle}
@@ -127,7 +123,7 @@ export async function GET(request: Request) {
             <div
               style={{
                 fontSize: 22,
-                fontWeight: 600,
+                fontWeight: 700,
                 color: "#5a4a3a",
                 lineHeight: 1.3,
                 display: "flex",
@@ -176,7 +172,7 @@ export async function GET(request: Request) {
           >
             <span
               style={{
-                fontSize: 18,
+                fontSize: 20,
                 fontWeight: 700,
                 color: "#5a4a3a",
               }}
@@ -185,7 +181,7 @@ export async function GET(request: Request) {
             </span>
             <span
               style={{
-                fontSize: 18,
+                fontSize: 20,
                 fontWeight: 700,
                 color: "#c47a5a",
               }}
@@ -200,13 +196,13 @@ export async function GET(request: Request) {
         height: 630,
         fonts: [
           {
-            name: "Geist",
+            name: "Noto Sans",
             data: fonts.regular,
             style: "normal" as const,
             weight: 400,
           },
           {
-            name: "Geist",
+            name: "Noto Sans",
             data: fonts.bold,
             style: "normal" as const,
             weight: 700,