node.jsdiscorddiscord.jscaironode-canvas

node-canvas Fonts dont work once they are deployed on the host


i am using node-canvas to generate a image for my discord server and i used some custom fonts and put them in my directory and they worked fine but when i deployed them on heroku or techstar host, the fonts don't load: heres how i am registering the fonts:

registerFont(path.join(__dirname, './../../../BlockHead_bold.ttf'), { family: 'BlockHead' }); registerFont(path.join(__dirname, './../../../Franchise-Free-Bold.ttf'), { family: 'Franchise Free' }); registerFont(path.join(__dirname, './../../../MANGOLD.ttf'), { family: 'MANGOLD' });

I have tried switching node-canvas version to 2.10.2 or 2.9.2 since i dont need to install font on my system with them but yea they didn't work either i also tried using absolute path as you can see above, they didn't work either.

the only thing i haven't tried which i got after searching in depth is that i would need to use cairo buildpack ? but my node-canvas installed perfectly on heroku so i didn't thought i would need that. but i try to install cairo buildpack but there aren't any for heroku-stack 22.

anyways i hope its not the 3rd option thats the problem because i don't plan on using heroku now.


Solution

  • The path was probably wrong on heroku. So I Used relative paths and resolved the actual absolute path with that, like this :

    const path = require('path');
    
    const blockHeadFontPath = path.resolve(__dirname, './../../../BlockHead_bold.ttf');
    const franchiseFreeFontPath = path.resolve(__dirname, './../../../Franchise-Free-Bold.ttf');
    const mangoldFontPath = path.resolve(__dirname, './../../../MANGOLD.ttf');
    
    registerFont(blockHeadFontPath, { family: 'BlockHead' });
    registerFont(franchiseFreeFontPath, { family: 'Franchise Free' });
    registerFont(mangoldFontPath, { family: 'MANGOLD' });