Using custom fonts from a ttf file

[muezz]

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).

[lovell]

Did you see https://sharp.pixelplumbing.com/install#fonts and https://www.freedesktop.org/software/fontconfig/fontconfig-user.html and the FC_DEBUG environment variable?

[muezz]

@lovell I have seen the first link but not the second. This is not an installed font in the OS. In this case I want to read from a .ttf file because I dont think there is a way to install it when this gets deployed to vercel.

About the font config, I have never created one before. If I use the example config file from the second link, where would it go when it eventually gets deployed to vercel?

[lovell]

What is the output from fontconfig when you set the FC_DEBUG=1 environment variable and run your example?

[muezz]

@lovell I get this error:

[Hashiphoto]

@muezz I was running into the same issue. Here's how I solved it for a font called Beaufort. I put the font and all its variations into a dir in my repo.

Then, create a fonts.conf file like this:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/path/to/the/dir/containing/your/font</dir>
  <match>
    <test name="family" compare="contains">
      <string>Beaufort</string>
    </test>
    <edit name="antialias" mode="assign">
      <bool>true</bool>
    </edit>
    <edit name="hinting" mode="assign">
      <bool>true</bool>
    </edit>
  </match>
</fontconfig>

You can do this in your console, but I run it on node app start

    const configFilePath = path.resolve("yourConfigDir", "fonts.conf");

    // Set environment variable for fontconfig
    process.env.FONTCONFIG_FILE = configFilePath;

    // Run fc-cache to refresh the font cache with your custom fonts directory
    await execPromise("fc-cache -fv");

I am really no expert on this stuff, but this is what got it working in my project.