Multiple variations for a single font family do not work

[VisualEhrmanntraut]

      font: {
        title: {
          families: ["Inter"],
        },
        description: {
          families: ["JetBrains Mono"],
        },
      },
      fonts: [
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-ext-400-normal.ttf",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/greek-400-normal.ttf",
        // "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/greek-ext-400-normal.ttf",
        "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.ttf",
        "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-ext-400-normal.ttf",
        "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/greek-400-normal.ttf",
        // "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/greek-ext-400-normal.ttf",
      ],

[delucis]

Hmm, not sure what’s going on here. It could be a font naming issue, for example, I know that with Noto Sans, we specify "Noto Sans" but also additional variations like "Noto Sans Arabic" in the families array.

One thing you could try is to check the logging when building. This will show a log of the font names, e.g. something like this:

[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-serif@latest/latin-400-normal.woff2
[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-serif@latest/latin-700-normal.woff2
[astro-og-canvas] Loaded 1 font families:
IBM Plex Serif

If you see additional names logged there like Inter Greek, those might also need to be set in the families array.

[VisualEhrmanntraut]

Nah, there's no additional families.

[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf
[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-ext-400-normal.ttf
[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/greek-400-normal.ttf
[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.ttf
[astro-og-canvas] Loading https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/greek-400-normal.ttf
[astro-og-canvas] Loaded 2 font families:
Inter, JetBrains Mono

[VisualEhrmanntraut]

I'm guessing it is expected here that the unicode range be specified for each variant.

[VisualEhrmanntraut]

@delucis I did some tests and it looks like it can't handle text with accents in it for some reason.

[VisualEhrmanntraut]

[VisualEhrmanntraut]

Uncommenting "greek-ext" fixed Inter, but JetBrains Mono is still broken even though it should support them.

[VisualEhrmanntraut]

I guess it's a font issue. Anyways, in total:

1. Swapped out ttf with woff2
2. Added the greek-ext along with greek variants.

And that fixed it. Sorry for taking up your time. Hope it helps future readers!

[VisualEhrmanntraut]

Unbelievable... the issue just magically came back.

[VisualEhrmanntraut]

I have no ideas.

import { getCollection } from "astro:content";
import { OGImageRoute } from "astro-og-canvas";
import type { OGImageOptions } from "node_modules/astro-og-canvas/dist/types";

const entries = await getCollection("docs");
const pages = Object.fromEntries(entries.map(({ data, id }) => [id, { data }]));

export const { getStaticPaths, GET } = OGImageRoute({
  pages,
  param: "slug",
  getImageOptions: (_path, page) => {
    const cover = page.data.cover
      ? "dark" in page.data.cover
        ? page.data.cover.dark
        : page.data.cover.image
      : undefined;

    let opts: OGImageOptions = {
      title: page.data.title,
      description: page.data.description,
      padding: 120,
      bgGradient: [[15, 15, 15]],
      border: {
        color: [16, 185, 129],
        side: "block-end",
        width: 16,
      },
      font: {
        title: {
          families: ["Inter"],
        },
        description: {
          families: ["Inter"],
        },
      },
      fonts: [
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-ext-400-normal.woff2",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/greek-400-normal.woff2",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/greek-ext-400-normal.woff2",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/cyrillic-400-normal.woff2",
        "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/cyrillic-ext-400-normal.woff2",
      ],
      quality: 100,
    };
    if (cover) {
      opts.bgImage = {
        path: "fsPath" in cover ? cover.fsPath : cover.src,
        fit: "fill",
      };
    }
    return opts;
  },
});

[VisualEhrmanntraut]

If I change the order then Greek renders but not Latin