sharp
sharp copied to clipboard
Using custom fonts from a ttf file
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:
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).