How to get the path of the font file (woff2) loaded from 'next/font/google'

[mxswat]

Summary

Hi, I'm trying to read the font Montserrat file path so I can use it in my @vercel/og API.
This font is being used in my app using the following code, and it works perfectly.

import { Montserrat, Roboto } from 'next/font/google';

export const montserrat = Montserrat({
  style: ['normal', 'italic'],
  subsets: ['latin'],
  variable: '--font-montserrat',
  weight: ['400', '500', '600', '700'],
});

But I want to access the local path of this file so that I can use it inside my @vercel/og API.

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'edge',
};
 

const font = fetch(new URL('INSER PATH OF THE FILE FROM next/font/google HERE', import.meta.url)).then(
  (res) => res.arrayBuffer(),
);
 
export default async function handler() {
  const fontData = await font;
 
  return new ImageResponse(
    (
      <div
        style={{
          backgroundColor: 'white',
          height: '100%',
          width: '100%',
          fontSize: 100,
          fontFamily: '"Typewriter"',
          paddingTop: '100px',
          paddingLeft: '50px',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Typewriter',
          data: fontData,
          style: 'normal',
        },
      ],
    },
  );
}

I have been trying to figure this out by looking inside this https://github.com/vercel/next.js/blob/canary/packages/font/src/google/loader.ts but I can't find a way around this problem

Additional information

No response

Example

No response

[MineiToshio]

@mxswat I'm having the same problem. Did you manage to find a solution?

[mxswat]

Sadly no.

…

On Wed, Jun 14, 2023, 8:49 AM Sergio Toshio Minei ***@***.***> wrote: @mxswat <https://github.com/mxswat> I'm having the same problem. Did you manage to find a solution? — Reply to this email directly, view it on GitHub <#49860 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEIL4ABWVJPVWJ6HTYUU57TXLFUG5ANCNFSM6AAAAAAYDV7XLY> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[icyJoseph]

Aren't these inlined into your project? Like, https://mysite.tld/_next/static/media/b323b5bc770ba6cb-s.p.woff2 - I am not sure it is possible to get these in the edge either. I once saw someone who made a GET request for a site, and then parse the HTML you receive and look for the link tag that has the font.

The main thing here is that I am not sure the other files are copied to the edge. As far as I understood, only the edge bundle is copied. Maybe I am way off though.

[mxswat]

Yes they are in line, but I'd like a reliable way to access that path. Because my main concern is that if that path changes, the image generation will break.

…

On Wed, Jun 14, 2023, 10:05 AM Joseph ***@***.***> wrote: Aren't these inlined into your project? Like, https://mysite.tld/_next/static/media/b323b5bc770ba6cb-s.p.woff2 - I am not sure it is possible to get these in the edge either. I once saw someone who made a GET request for a site, and then parse the HTML you receive and look for the link tag that has the font. The main thing here is that I am not sure the other files are copied to the edge. As far as I understood, only the edge bundle is copied. Maybe I am way off though. — Reply to this email directly, view it on GitHub <#49860 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEIL4AHJO7ZQHEP3FACRY3TXLF5D7ANCNFSM6AAAAAAYDV7XLY> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>

[icyJoseph]

And at that point, why not get it from Google static assets itself? With fetch? is there any restriction to that?

[davecardwell]

I’d also be interested in accessing the URL to the font (eg. _next/static/media/2aaf0723e720e8b9-s.p.woff2).

Our use case is an iframe we embed. We’re able to pass in a @font-face specification to be used for the content and I’d like to be able to re-use the Next.js-generated font file.

Another example of this use-case is customizing the font for Stripe Elements embeds:
https://stripe.com/docs/js/elements_object/create
https://stripe.com/docs/js/appendix/custom_font_source_object

[devCharles]

That's my use case, i wanted to customize stripe Elements

What i ended up doing is using the google font API directly since it is not possible to get the optimized local font path

not the optimal solution, so it would be awesome if the path can be accessible from the next font API

const options: StripeElementsOptions = {
  ...
  fonts: [
    {
      cssSrc:
        'https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap',
    },
  ],
}

[isener]

That's my use case, i wanted to customize stripe Elements

What i ended up doing is using the google font API directly since it is not possible to get the optimized local font path

not the optimal solution, so it would be awesome if the path can be accessible from the next font API

const options: StripeElementsOptions = {
  ...
  fonts: [
    {
      cssSrc:
        'https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap',
    },
  ],
}

This is also what I've done. I'd be awesome to get either @font-face on .css file or local path of the font we've used.

[boredland]

This is exactly what we solve with the solution I posted above ...

[kohort-aymeric]

+1 here

[glenntws]

+1. Use case is reusing a brand-wide default font across multiple web based projects with the Next.JS app being the "main" app of the company.

[studentIvan]

the only way I found is the fetch to the API route, with node.js check like I did below

import { promises as fs } from "fs";

// ...

const file = await fs
      .readFile(process.cwd() + "/.next/server/next-font-manifest.json", "utf8")
      .catch(() => "");
    const data = ((file && JSON.parse(file)) || {}) as {
      pages: {};
      app: { [k: string]: string[] };
    };
    const layoutKey = Object.keys(data?.app).shift();
    const layoutFont = layoutKey && data.app[layoutKey]?.at(0);

[arunavo4]

Here is how I did it, You need to have it on a folder to load it.

// Image generation
export default async function OGImage({
  params,
}: {
  params: { slug: string };
}) {
  // Font
  const barlowCondensed600 = fetch(
    new URL("../../fonts/BarlowCondensed-600.ttf", import.meta.url),
  ).then((res) => res.arrayBuffer());

  const barlow500 = fetch(
    new URL("../../fonts/Barlow-500.ttf", import.meta.url),
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          width: 1200,
          height: 630,
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          position: "relative",
          background: "#0C0A09",
        }}
      >
        <div
          style={{
            left: 120,
            top: 50,
            position: "absolute",
            display: "flex",
            flexDirection: "row",
            justifyContent: "flex-start",
          }}
        >
          <p
            style={{
              width: 912,
              height: "auto",
              maxHeight: "302.4px",
              color: "white",
              fontSize: 96,
              fontFamily: "Barlow Condensed",
              fontWeight: "600",
              wordWrap: "break-word",
              textTransform: "uppercase",
              lineHeight: "105%",
              display: "-webkit-box",
              WebkitLineClamp: 3,
              WebkitBoxOrient: "vertical",
              overflow: "hidden",
            }}
          >
            {deSlugify(params.slug)}
          </p>
        </div>
        <div
          style={{
            left: 120,
            top: 440,
            position: "absolute",
            display: "flex",
            flexDirection: "row",
            justifyContent: "flex-start",
          }}
        >
          <span
            style={{
              color: "white",
              fontSize: 64,
              fontFamily: "Barlow",
              fontWeight: "500",
              wordWrap: "break-word",
            }}
          >
            Arunavo{" "}
          </span>
          <span
            style={{
              color: "rgba(255, 255, 255, 0.40)",
              fontSize: 64,
              fontFamily: "Barlow",
              fontWeight: "500",
              wordWrap: "break-word",
            }}
          >
            Ray
          </span>
          <span
            style={{
              color: "white",
              fontSize: 64,
              fontFamily: "Barlow",
              fontWeight: "500",
              wordWrap: "break-word",
            }}
          >
            .
          </span>
        </div>
        <img
          style={{
            width: 420,
            height: 420,
            left: 780,
            top: 210,
            position: "absolute",
          }}
          src={`http${process.env.NODE_ENV === "production" ? "s" : ""}://${
            process.env.NEXT_PUBLIC_WEBSITE_DOMAIN
          }/assets/avatar.png`}
          alt={deSlugify(params.slug)}
          width={420}
          height={420}
        />
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported opengraph-image
      // size config to also set the ImageResponse's width and height.
      ...size,
      fonts: [
        {
          name: "Barlow Condensed",
          data: await barlowCondensed600,
          style: "normal",
          weight: 600,
        },
        {
          name: "Barlow",
          data: await barlow500,
          style: "normal",
          weight: 500,
        },
      ],
    },
  );
}

[boredland]

How about extracting the loaded font from the documents' cssRules?

  
  type FontFaceRule = CSSFontFaceRule & {
    style: CSSFontFaceRule["style"] & {
      src: string;
      fontDisplay: FontDisplay;
    };
  };
  const [fonts, setFonts] = useState<CustomFontSource[]>([]);
  useEffect(() => {
    const f = Array.from(document.styleSheets)
      .flatMap((sheet) => {
        return Array.from(sheet.cssRules);
      })
      .filter((rule): rule is FontFaceRule => {
        return (
          rule instanceof CSSFontFaceRule &&
          rule.style.getPropertyValue("src") != null &&
          rule.style.getPropertyValue("fontDisplay") != null
        );
      })
      .map((rule) => {
        return {
          family: rule.style.fontFamily.replace(/"/g, ""),
          weight: rule.style.fontWeight,
          display: rule.style.fontDisplay,
          style: rule.style.fontStyle as CustomFontSource["style"],
          src: rule.style.src.replace(/"/g, ""),
        };
      });
    setFonts(f);
  }, []);

[ArianHamdi]

Same here, I would like to either use next/font directly in the next/og (I know these are totally two different things) or have next/font expose those URLs so we can use them in next/og instead of manually collocating those fonts in the app only for OpenGraph.

[zenoachtig]

I'm trying to come up with a solution to this exact problem without resorting to hacks. Did you manage to solve it?

[tellesvh]

Hey guys!
Apologies for getting too late to the party, but this guide has helped me!
I made some changes, however. Please check my full code:

import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export const alt = 'ALT';
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

export default async function Image() {

  return new ImageResponse(
    (
      <div
        style={{
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 150,
          fontWeight: 600
        }}
      >
        Lorem ipsum
        <span style={{ fontSize: 150, fontWeight: 400 }}>
          Lorem ipsum
        </span>
      </div>
    ),
    {
      ...size,
      fonts: [
        {
          name: 'Ubuntu Sans',
          data: await loadGoogleFont('Ubuntu Sans', 600),
          style: 'normal',
          weight: 600
        },
        {
          name: 'Ubuntu Sans',
          data: await loadGoogleFont('Ubuntu Sans', 400),
          style: 'normal',
          weight: 400
        }
      ],
    }
  )
}

async function loadGoogleFont(font: string, weight: number) {
  const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`
  const css = await (await fetch(url)).text()
  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)

  if (resource) {
    const response = await fetch(resource[1])
    if (response.status == 200) {
      return await response.arrayBuffer()
    }
  }

  throw new Error('❌ Failed to load font data!')
}

The image is then rendered like this:

Hope this helps! 😊

[Fgc17]

Here's a more peformant version:

// load-google-fonts.ts

import { ImageResponseOptions } from "next/server";

type FontOptions = ImageResponseOptions["fonts"];

async function loadGoogleFont(font: string, weight: number) {
  const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`;
  const css = await (await fetch(url)).text();
  const resource = css.match(
    /src: url\((.+)\) format\('(opentype|truetype)'\)/
  );

  if (resource) {
    const response = await fetch(resource[1]);
    if (response.status == 200) {
      return {
        buffer: await response.arrayBuffer(),
        font: { family: font, weight: weight },
      };
    }
  }

  throw new Error("❌ Failed to load font data!");
}

export const getFonts = async () => {
  const fonts = await Promise.all([
    loadGoogleFont("Inter", 400),
    loadGoogleFont("Inter", 600),
    loadGoogleFont("Inter", 700),
  ]);

  return fonts.map(({ font, buffer }) => ({
    name: font.family,
    data: buffer,
    style: "normal",
    weight: font.weight,
  })) as FontOptions;
};

// image.tsx

import { getFonts } from "./load-google-fonts";

const Image = new ImageResponse(
    (
      <div></div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: await getFonts()
    }
  )