Railway•9mo ago

Fontconfig not using my .tff file

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?

7 Replies

Percy•9mo ago

Project ID: 7cd6accf-c753-4c35-b439-3a2e79995ab1

0xDonOP•9mo ago

7cd6accf-c753-4c35-b439-3a2e79995ab1 I referencedthis but im not using node-canvas https://github.com/brody192/node-canvas-fonts

Brody•9mo ago

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

0xDonOP•9mo ago

0xDonOP•9mo 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? 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
        },
...
]);

 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

Brody•9mo ago

try adding gcc-unwrapped to your nixPkgs 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

0xDonOP•8mo ago

Ok great! ill add that 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) => `<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>${fontPath}</dir>
  <cachedir>/tmp/fonts-cache/</cachedir>
  <config></config>
</fontconfig>
`;
const bullseye = '\u25CE'; // Unicode escape sequence for ◎

const enableCustomFonts = () => {
  // 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";
};

const fontConfigTemplate = (fontPath) => `<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>${fontPath}</dir>
  <cachedir>/tmp/fonts-cache/</cachedir>
  <config></config>
</fontconfig>
`;
const bullseye = '\u25CE'; // Unicode escape sequence for ◎

const enableCustomFonts = () => {
  // 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

Gaming

Programming

Fontconfig not using my .tff file