next-google-fonts-loader

A Next.js ImageResponse compatible loader for Google Fonts.

Installation

npm install next-google-fonts-loader

Usage

1import { ImageResponse } from "next/og";
2import { loader } from "next-google-fonts-loader";
3
4export async function GET() {
5  const text = "hello world";
6  const fonts = await loader([{ name: "Roboto", weights: [800], styles: ["italic"] }], text);
7  return new ImageResponse(
8    (
9      <div
10        style={{
11          height: "100%",
12          display: "flex",
13          flexDirection: "column",
14          justifyContent: "center",
15          alignItems: "center",
16        }}
17      >
18        <h1
19          style={{
20            fontFamily: "Roboto",
21            fontWeight: 800,
22            fontStyle: "italic",
23          }}
24        >
25          {text}
26        </h1>
27      </div>
28    ),
29    { fonts },
30  );
31}