Incorrect guide for accessing font programatically through Fonts API

[3x10RaiseTo8]

📚 Subject area/topic

Fonts API

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/guides/fonts/#accessing-font-data-programmatically

📋 Description of content that is out-of-date or incorrect

context.url.origin will resolve to the Astro.site string in astro build production mode. Meaning the font already has to be deployed for this fetch to work. Fix could be to use readfile and stuff rather than involving urls.

Also, it is useful to mention that satori doesn't use woff2 format.

This particular guide is very useful but it has to be bug free and descriptive. Almost everyone wants og image for their blog so that it looks more personalised when shared on the internet.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[ArmandPhilippot]

I agree this is not ideal at the moment. I shared the same concern regarding the font path, earlier, in #13324 (comment). And we had some support questions about this in Discord as well.

The API is meant to be improved soon, so we didn't want to update the example yet. But because we don't have a due date, this example should probably be updated even this becomes a bit more verbose.

I think something like this could work for both dev and build time and is Typescript-friendly:

import type{ APIRoute } from "astro"
import { fontData } from "astro:assets"
import { outDir } from "astro:config/server";
import { readFile } from "node:fs/promises";
import satori from "satori"
import { html } from "satori-html";

export const GET: APIRoute = async (context) => {
  const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;

  if (fontPath === undefined) {
    throw new Error("Cannot find the font path.");
  }

  const data = import.meta.env.DEV
    ? await fetch(new URL(fontPath, context.url.origin)).then(async (res) =>
        res.arrayBuffer()
      )
    : await readFile(new URL(`.${fontPath}`, outDir));

  const svg = await satori(
    html`<div style="color: black;">hello, world</div>`,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data,
          weight: 400,
          style: "normal",
        },
      ],
    },
  )

  // ...
}

But I don't think this works with all use cases. I know I had to use build.client instead of outDir with the Node adapter. And so, this is still not ideal.