fix(image-export) : render talent relation symbols

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
+import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 
 import { ImageResponse } from "next/og";
@@ -42,6 +43,10 @@ const anuphanFonts = Promise.all(
   }),
 ).catch(() => []);
 
+const relationFont = readFile(
+  join(process.cwd(), "public", "Kanit-SemiBold.ttf"),
+);
+
 function metric(value: string): string {
   return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
 }
@@ -110,9 +115,9 @@ export async function GET(
   if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
-  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] =
+  const [fontAssets, groupAssets, statIconAssets, talentAssets, targetStatAssets] =
     await Promise.all([
-      anuphanFonts,
+      Promise.all([anuphanFonts, relationFont]),
       Promise.all(
         guide.groups.map((group) =>
           Promise.all(
@@ -144,6 +149,7 @@ export async function GET(
         ),
       ),
     ]);
+  const [fonts, relationFontData] = fontAssets;
 
   const profile = guide.profile;
   const recommendedStatAsset = (value: string) => {
@@ -707,7 +713,7 @@ export async function GET(
                             </span>
                           </span>
                           {index < talents.length - 1 ? (
-                            <span>
+                            <span style={{ fontFamily: "Kanit" }}>
                               {talentRelationSymbol(talent.relationToNext)}
                             </span>
                           ) : null}
@@ -750,7 +756,15 @@ export async function GET(
     {
       width: 1200,
       height,
-      fonts: fonts.length ? fonts : undefined,
+      fonts: [
+        ...fonts,
+        {
+          name: "Kanit",
+          data: relationFontData,
+          weight: 600,
+          style: "normal",
+        },
+      ],
       headers: {
         "Cache-Control": "no-store",
         "Content-Disposition": imageContentDisposition(