sharp icon indicating copy to clipboard operation
sharp copied to clipboard

Using custom fonts from a ttf file

Open muezz opened this issue 5 months ago • 5 comments

How can I use a custom font from a ttf file?

I have a file called Righteous.ttf. I am not able to use this font in the image.

In my NextJS project, I have an API that is supposed to merge two images and overlay a title on it in a particular font. The font file is in the format .ttf and exists in the same folder as the api:

image

Here is the code where I am trying to use this font:

const result = await sharp(resizedUrlImage)
    .composite([
      { input: await base.toBuffer(), blend: "over" },
      {
        input: {
          text: {
            // text: `<span foreground='white'>${title}</span>`,
            text: title,
            font: "Righteous",
            fontfile: path.join(
              process.cwd(),
              "./app/api/webhooks/pins/Righteous.ttf"
            ),
            wrap: "word",
            width: w - 300,
            dpi,
            rgba: true,
          },
        },
        blend: "over",
        left,
        top,
      },
    ])
    .toBuffer();

What am I doing wrong here? The docs dont have an example for this (or at least I can't find it).

muezz avatar Sep 04 '24 00:09 muezz