docs(OpenGraphImage): document open graph image customization

README.md

@@ -181,6 +181,75 @@ export default MyCustomComponent;
 
 By using fetchWithToken, you ensure that all data fetching happens securely, with the server-side API route handling the sensitive token.
 
+### OpenGraph image customization
+
+#### Custom fonts
+
+The following font utils file can be defined:
+
+> fonts must be placed in `/public/fonts`
+
+```tsx
+import { readFile } from "fs/promises";
+import { join } from "path";
+
+type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontStyle = "normal" | "italic";
+interface FontOptions {
+  data: Buffer | ArrayBuffer;
+  name: string;
+  weight?: Weight;
+  style?: FontStyle;
+  lang?: string;
+}
+
+function readFont(filename: string) {
+  return readFile(join(process.cwd(), "public/fonts", filename));
+}
+
+export async function getFonts(): Promise<FontOptions[]> {
+  return [
+    {
+      data: await readFont("graphik_regular.woff"),
+      name: "Graphik",
+      weight: 400,
+      style: "normal",
+    },
+    {
+      data: await readFont("graphik_medium.woff"),
+      name: "Graphik",
+      weight: 600,
+      style: "normal",
+    },
+    {
+      data: await readFont("recoleta.ttf"),
+      name: "Recoleta",
+      weight: 600,
+      style: "normal",
+    },
+  ];
+}
+```
+
+followed by a modification of the image route response:
+
+```tsx
+(<OpenGraphImage title={title} description={description ?? undefined} />),
+  {
+    width: 1200,
+    height: 630,
+    fonts: await getFonts(), // add this line
+  };
+```
+
+#### Custom background
+
+Simply use the CSS background property on the root element with a base64-encoded data url
+
+```css
+background: url("data:image/png;base64,...");
+```
+
 ### Troubleshooting
 
 - Sanity Preview: While the Sanity preview functionality is not fully optimized, it currently meets the essential requirements.