R
Railway3mo ago
0xDon

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
Percy3mo ago
Project ID: 7cd6accf-c753-4c35-b439-3a2e79995ab1
0xDon
0xDon3mo ago
7cd6accf-c753-4c35-b439-3a2e79995ab1 I referencedthis but im not using node-canvas https://github.com/brody192/node-canvas-fonts
Brody
Brody3mo ago
can you send the build table at the top of your build logs please
0xDon
0xDon3mo ago
No description
0xDon
0xDon3mo 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
Brody3mo 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
0xDon
0xDon2mo 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