Why is the font broken when using OG Image Bangla font?

Help
1

Summary
I have followed the guide here and produced the following file src/app/api/og/route.tsx:

import { ImageResponse } from '@vercel/og';
import { NextRequest } from "next/server";
import {deploymentURL} from "@/constant/env";
export const runtime = 'edge';
//const fontNormal = fetch(new URL("../../../../assets/SolaimanLipi.ttf", import.meta.url)).then((res) => res.arrayBuffer());

export async function GET(req: NextRequest) {
    const fontData = await fetch(
        new URL('../../../../assets/NotoSerifBengali-Bold.ttf', import.meta.url),
    ).then((res) => res.arrayBuffer());
    try {
        const { searchParams } = new URL(req.url);
        const title = searchParams.get("title");
        const description = searchParams.get("description");
        const logoUrl = searchParams.get("logoUrl");

        const decodedLogoUrl = logoUrl ? decodeURIComponent(logoUrl) : `${deploymentURL}/images/logo.png`;
        return new ImageResponse(
            (
                <div style={{
                    width: '100%',
                    height: '100%',
                    position: "relative",
                    background: "red",
                    overflow: "hidden",
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    letterSpacing: -4,
                    fontFamily: '"NotoSerifBengali"',
                    fontWeight: 'bold'
                }}>
                    <div style={{
                        width: '120%',
                        height: '800px',
                        position: "absolute",
                        top: '-510px',
                        left: '-10%',
                        zIndex: 10,
                        borderRadius: '50%',
                        background: '#abb2b9',
                    }}></div>
                    <div style={{
                        width: '110%',
                        height: '950px',
                        position: "absolute",
                        top: '-660px',
                        left: '-5%',
                        zIndex: 11,
                        borderRadius: '50%',
                        background: '#d6dbdf'
                    }}></div>
                    {decodedLogoUrl && (
                        <img src={decodedLogoUrl} alt="logo" width={200} height={200}
                             style={{
                                 objectFit: 'contain',
                                 position: "absolute",
                                 top: 25,
                                 left: '50%',
                                 transform: 'translateX(-50%)',
                             }}/>
                    )}

                        <h1 tw="text-6xl font-bold bg-yellow-200 rounded-lg uppercase p-4 text-center absolute top-72">{title}</h1>
                        <p tw="text-6xl font-bold text-white text-center absolute top-100">{description}</p>

                        <p tw="absolute, rotate-180	top-0 left-0">Ebdresults.com</p>
                </div>
            ),
            {
                fonts: [
                    {
                        name: 'NotoSerifBengali',
                        data: fontData,
                    },
                ],
                width: 1200,
                height: 630,

            },
        );
   } catch (error: any) {
       console.log(`${error.message}`);
        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
        return new Response(`Failed to load image: ${errorMessage}`, {
            status: 500,
        })
    }
}
2

Hi, @creativehabib!

Here are a few things we can check and try:

  1. Make sure the font file path is correct. In your code, you’re using a relative path:
new URL('../../../../assets/NotoSerifBengali-Bold.ttf', import.meta.url)

Ensure that this path correctly points to your font file. You might want to try using an absolute path to rule out any path-related issues.

  1. Check if the font is being loaded correctly. You can add a console.log after fetching the font to ensure it’s not empty:
const fontData = await fetch(
    new URL('../../../../assets/NotoSerifBengali-Bold.ttf', import.meta.url),
).then((res) => res.arrayBuffer());
console.log('Font data length:', fontData.byteLength);

If the byteLength is 0 or very small, it might indicate that the font file is not being loaded correctly.

  1. Ensure you’re using the font name correctly in your styles. In your code, you’re using:
fontFamily: '"NotoSerifBengali"',

Make sure this matches exactly with the name you’ve given when loading the font:

fonts: [
    {
        name: 'NotoSerifBengali',
        data: fontData,
    },
],
  1. Take a look to see if NotoSerifBengali-Bold.ttf file is compatible with the @vercel/og package. Some font files might not work correctly due to formatting issues. You could try using a different Bangla font to see if the issue persists.
  2. Your error handling is good, but you might want to log more details about the error. Instead of just logging the error message, log the entire error object:
console.error('Error generating OG image:', error);

This might provide more insight into what’s going wrong.

Let us know how you get on!

3

Everything ok but not working

image
image1201×605 87.1 KB

4

Please give me any suggestion

5

Hi, @creativehabib! Thanks for your patience :pray:

Did you manage to get this working? If not, feel free to share your project with us! Happy to dig a bit deeper.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.