Fontconfig not using my .tff file

thedonmonHOBBY

a year ago

Hello, did some searching on fontconfig in the server and found a few issues that helped me by adding a nixpacks.toml file and adding aptPkgs=['...', 'fontconfig'] however it looks like the font is still not respected when trying to load the .tff ive included in the repository. The repo is pretty simple discord bot that generates an image from svg using sharp only. So far ive got things working where at least font is displaying but the font is not using what I specified in the SVG im creating for sharp. I placed the .ttf file in assets directiory as well as fonts directory. Any suggestions?

0 Replies

thedonmonHOBBY

a year ago

7cd6accf-c753-4c35-b439-3a2e79995ab1

thedonmonHOBBY

a year ago

I referencedthis but im not using node-canvas https://github.com/brody192/node-canvas-fonts

brodyEMPLOYEE

a year ago

can you send the build table at the top of your build logs please

thedonmonHOBBY

a year ago

1221614671631745000

thedonmonHOBBY

a year ago

without the font config, no font was rendering (just the square box placeholders) so that definitely helped. Wondering if theres a way I can specify in my nixpacks.toml to copy the fonts file to etc/share/fonts?

thedonmonHOBBY

a year ago

sample of how im compiling the svg for sharp:

 const roiSvg = `
    <svg width="300" height="82">
        <style>.profit { fill: #184624; font-size: 64; font-weight: bold; font-family: "Space Grotesk"}</style>
        <text x="0" y="50%" text-anchor="left" dy="0.25em" class="profit">${roi.toLocaleString()}%</text>
    </svg>`;

const newImage = await banner.composite([
{
            input: Buffer.from(roiSvg),
            top: 894,
            left: 792
        },
...
]);

Space Grotesk is the .ttf file i have included in an assets folder. the images are loading fine

brodyEMPLOYEE

a year ago

try adding gcc-unwrapped to your nixPkgs

brodyEMPLOYEE

a year ago

if that doesn't work, can you put together a simple minimal reproducible repo, in the same style as my repo you linked where the image is served via express

thedonmonHOBBY

a year ago

Ok great! ill add that

thedonmonHOBBY

a year ago

If anyone ever runs into the issue I had to do some crazy fontconfig hacks.

Basically make sure you define a fonts.conf file (I placed it in the same dir as my fonts:

const fontConfigTemplate = (fontPath) =&gt; `


  <dir>${fontPath}</dir>
  /tmp/fonts-cache/


`;
const bullseye = '\u25CE'; // Unicode escape sequence for ◎

const enableCustomFonts = () =&gt; {
  // Create the font config file
  const fontDir = path.resolve(path.join(__dirname, "fonts"));
  // console.log(fontDir);
  fs.writeFileSync(
    path.join(fontDir, "fonts.conf"),
    fontConfigTemplate(fontDir)
  );
  // Set the environment variable path
  process.env.FONTCONFIG_PATH = fontDir;
//   // Set font config debugging to true
//   process.env.FC_DEBUG = "1024";
};

Made sure that runs every time for my bot, but once you see the path of the directory on the railway app you can just be sure that env is set process.env.FONTCONFIG_PATH = fontDir

Was running into an issue locally as well using MacOS still never could get the font to load properly

Fontconfig not using my .tff file - Railway Help Station